{{#unless short}}
<div class="header{{#if isGM}} is-gm{{/if}}">
    {{#if isGM}}
    <div class="time-slider">
        <input type="range" name="time-slider" min="0" max="86400" step="1800" value="{{slider}}"
            data-value="{{slider}}">
    </div>
    {{/if}}
    <div class="date">
        {{date}}
    </div>
</div>
{{/unless}}
<div class="details">
    {{#if isGM}}
    <div class="left controls">
        {{> 'increments' sign="-"}}
    </div>
    {{/if}}
    {{#if short}}
    <div class="time" data-action="toggle-short" data-tooltip="{{date}}">
        {{short.date}} <span>{{short.time}}</span>
    </div>
    {{else}}
    <div class="time" data-action="toggle-short">
        <span>{{time}}</span>
    </div>
    {{/if}}
    {{#if isGM}}
    <div class="right controls">
        {{> 'increments' sign="+"}}
    </div>
    {{/if}}
</div>

{{#*inline 'increments'}}
<a data-action="increment-time" data-increment="600" data-direction="{{sign}}"
    data-tooltip="{{sign}}{{localize 'PF2E.WorldClock.Button.AddTenMinutes'}}">
    <i class="fa-solid fa-angle-right"></i>
</a>
<a data-action="increment-time" data-increment="3600" data-direction="{{sign}}"
    data-tooltip="{{sign}}{{localize 'PF2E.WorldClock.Button.AddOneHour'}}">
    <i class="fa-duotone fa-solid fa-angles-right"></i>
</a>
<a data-action="increment-time" data-increment="86400" data-direction="{{sign}}"
    data-tooltip="{{sign}}{{localize 'PF2E.WorldClock.Button.AddOneDay'}}">
    <i class="fa-solid fa-angles-right"></i>
</a>
{{/inline}}