<div class="content">
  <div class="time-display">
    <div class="time-wrapper">
      <span class="time">{{{currentTime}}}</span>
      {{#if canChangeDateTime}}
        <button type="button" class="play-btn{{#if clockLocked}} clock-locked{{/if}}" data-action="toggle" data-tooltip
          aria-label="{{#if clockDisabled}}{{localize 'CALENDARIA.TimeClock.Disabled'}}{{else if clockLocked}}{{localize 'CALENDARIA.TimeClock.Locked'}}{{else if running}}{{localize 'CALENDARIA.TimeKeeper.Stop'}}{{else}}{{localize 'CALENDARIA.TimeKeeper.Start'}}{{/if}}">
          <i class="fas {{#if clockLocked}}fa-lock{{else}}{{#if running}}fa-pause{{else}}fa-play{{/if}}{{/if}}"></i>
        </button>
      {{/if}}
    </div>
    {{#if showDate}}<span class="date">{{{currentDate}}}</span>{{/if}}
  </div>

  {{#if canChangeDateTime}}
    <div class="controls">
      {{#if showDec2}}
        <button type="button" class="time-btn" data-action="dec2" data-tooltip aria-label="{{dec2Tooltip}}">
          <i class="fa-solid fa-backward-fast"></i>
        </button>
      {{/if}}
      {{#if showDec1}}
        <button type="button" class="time-btn" data-action="dec1" data-tooltip aria-label="{{dec1Tooltip}}">
          <i class="fa-solid fa-backward"></i>
        </button>
      {{/if}}
      <select class="increment-select" data-action="increment">
        {{#each increments}}
          <option value="{{key}}" {{#if selected}}selected{{/if}}>{{label}}</option>
        {{/each}}
      </select>
      {{#if showInc1}}
        <button type="button" class="time-btn" data-action="inc1" data-tooltip aria-label="{{inc1Tooltip}}">
          <i class="fa-solid fa-forward"></i>
        </button>
      {{/if}}
      {{#if showInc2}}
        <button type="button" class="time-btn" data-action="inc2" data-tooltip aria-label="{{inc2Tooltip}}">
          <i class="fa-solid fa-forward-fast"></i>
        </button>
      {{/if}}
    </div>
  {{else}}
    <div class="controls">
      <span class="readonly">
        <i class="fas fa-clock"></i>
        {{localize "CALENDARIA.TimeKeeper.ReadOnly"}}
      </span>
    </div>
  {{/if}}
</div>
