<section class="entity-chronicle-panel" data-entity-chronicle-panel>
    <header class="entity-chronicle-panel__tools">
        {{#unless multipleRegions}}
            {{#if singleRegion.sceneId}}
            <button class="entity-chronicle-panel__open-full" type="button" data-action="openFullChronicle" data-scene-id="{{singleRegion.sceneId}}" title="Open the full regional Chronicle"><i class="fas fa-scroll"></i><span>Open full Chronicle</span></button>
            {{/if}}
        {{/unless}}
        <label class="entity-chronicle-panel__type-filter" title="Filter by event type">
            <span class="sr-only">Event type</span>
            <select data-entity-chronicle-filter="type">
                <option value="">All events</option>
                {{selectOptions typeOptions selected=filters.type valueAttr="value" labelAttr="label"}}
            </select>
        </label>
        <button type="button" data-action="clearEntityChronicleFilters" title="Clear Chronicle filters" {{#unless hasFilters}}disabled{{/unless}}><i class="fas fa-rotate-left"></i></button>
    </header>

    <div class="entity-chronicle-panel__scroll">
        {{#if hasVisibleEvents}}
            {{#if multipleRegions}}
                {{#each regions}}
                <section class="entity-chronicle-region">
                    <header class="entity-chronicle-region__heading">
                        <div><i class="fas fa-map"></i><strong>{{sceneName}}</strong></div>
                        {{#if sceneId}}<button type="button" data-action="openFullChronicle" data-scene-id="{{sceneId}}" title="Open the full Chronicle for {{sceneName}}"><i class="fas fa-up-right-from-square"></i></button>{{/if}}
                    </header>
                    {{{timelineHtml}}}
                </section>
                {{/each}}
            {{else}}
                {{{singleTimelineHtml}}}
            {{/if}}
        {{else}}
            {{{emptyTimelineHtml}}}
        {{/if}}
    </div>
</section>
