<section 
    class="clock-display {{#if @root.options.editable}}editable{{/if}} {{verticalEdge}} {{horizontalEdge}}"
    data-location="{{location}}"
    style="--vertical-offset: {{verticalOffset}}">
    {{#if clocks}}
        <div class="clock-list" >
            {{#each clocks as |clock|}}
                <div 
                    class="clock-entry ui-control {{clock.type}} {{#if clock.editable}}editable{{/if}} {{#if clock.private}}private{{/if}} {{#unless clock.visible}}hidden{{/unless}}" 
                    data-id="{{clock.id}}"
                    style="--max: {{clock.max}}; --filled: {{clock.value}}; --entry-color: {{clock.color}}; --entry-background: {{clock.backgroundColor}}"
                >
                    {{#if (eq clock.type "tracker")}}
                        <div class="name">
                            <span class="value">{{clock.name}}</span>
                            {{#if @root.options.editable}}
                                <div class="tracker-controls">
                                    <a data-action="deleteEntry"><i class="fa-solid fa-fw fa-trash"></i></a>
                                    <a data-action="editEntry"><i class="fa-solid fa-fw fa-edit"></i></a>
                                </div>
                            {{/if}}
                        </div>
                        <div class="tracker-element graphic">
                            <div class="value">{{clock.value}}/{{clock.max}}</div>
                            <div class="tracker-slashes">
                                {{#each clock.slashes}}
                                    <div class="slash {{#if this.filled}}filled{{/if}}"></div>
                                {{/each}}
                            </div>
                        </div>
                    {{else}}
                        <div class="name">
                            <span class="value">{{#if clock.private}}<i class="fas fa-eye-slash"></i> {{/if}}{{clock.name}}</span>
                            {{#if @root.options.editable}}
                                <div class="controls">
                                    <a data-action="deleteEntry"><i class="fa-solid fa-fw fa-trash"></i></a>
                                    <a data-action="editEntry"><i class="fa-solid fa-fw fa-edit"></i></a>
                                    <span class="value">{{#if clock.private}}<i class="fas fa-eye-slash"></i> {{/if}}{{clock.name}}</span>
                                </div>
                            {{/if}}
                        </div>
                        {{#if (eq clock.type "points")}}
                            <div class="points-element graphic">
                                {{clock.value}}
                            </div>
                        {{else}}
                            <div class="clock-element graphic">
                                {{#each clock.spokes}}
                                    <div class="spoke" style="--index: {{ this }}"></div>
                                {{/each}}
                            </div>
                        {{/if}}
                    {{/if}}
                </div>
            {{/each}}
        </div>
    {{/if}}
    {{#if @root.options.editable}}
        <div class="main-controls">
            {{#if @root.enabled.trackers}}
                <button class="ui-control" data-action="addTracker">
                    <i class="fas fa-plus"></i> {{localize "GlobalProgressClocks.Add.Tracker"}}
                </a>
            {{/if}}
            {{#if @root.enabled.points}}
                <button class="ui-control" data-action="addPoints">
                    <i class="fas fa-plus"></i> {{localize "GlobalProgressClocks.Add.Points"}}
                </a>
            {{/if}}
            {{#if @root.enabled.clocks}}
                <button class="ui-control" data-action="addClock">
                    <i class="fas fa-plus"></i> {{localize "GlobalProgressClocks.Add.Clock"}}
                </a>
            {{/if}}
        </div>
    {{/if}}
</section>