<div class="chronicle-ledger">
    {{#if available}}
        <header class="chronicle-ledger__masthead">
            <div class="chronicle-ledger__rule" aria-hidden="true"><i class="fas fa-diamond"></i></div>
            <p class="chronicle-ledger__kicker">{{chronicle.title}}</p>
            <h1>{{chronicle.sceneName}}</h1>
            <p class="chronicle-ledger__subtitle">
                {{#if chronicle.partial}}An unfinished account of{{else}}The account of{{/if}}
                {{chronicle.years}} years of settlement, trade, ambition, and change.
            </p>
            <dl class="chronicle-ledger__summary">
                {{#each summaryItems}}
                    <div>
                        <dt><i class="{{icon}}"></i> {{label}}</dt>
                        <dd>{{value}}</dd>
                    </div>
                {{/each}}
            </dl>
        </header>

        <section class="chronicle-ledger__filters" aria-label="Chronicle filters">
            <label class="chronicle-ledger__search">
                <span>Search the record</span>
                <span class="chronicle-ledger__input-wrap"><i class="fas fa-magnifying-glass"></i><input type="search" value="{{filters.search}}" placeholder="Name, place, event, or good" data-chronicle-filter="search"></span>
            </label>
            <label>
                <span>Faction</span>
                <select data-chronicle-filter="faction">
                    <option value="">All factions</option>
                    {{selectOptions factionOptions selected=filters.faction valueAttr="value" labelAttr="label"}}
                </select>
            </label>
            <label>
                <span>Person</span>
                <select data-chronicle-filter="actor">
                    <option value="">All people</option>
                    {{selectOptions actorOptions selected=filters.actor valueAttr="value" labelAttr="label"}}
                </select>
            </label>
            <label>
                <span>Place</span>
                <select data-chronicle-filter="location">
                    <option value="">All places</option>
                    {{selectOptions locationOptions selected=filters.location valueAttr="value" labelAttr="label"}}
                </select>
            </label>
            <label>
                <span>Event</span>
                <select data-chronicle-filter="type">
                    <option value="">All events</option>
                    {{selectOptions typeOptions selected=filters.type valueAttr="value" labelAttr="label"}}
                </select>
            </label>
            <label>
                <span>Scope</span>
                <select data-chronicle-filter="scope">
                    {{selectOptions scopeOptions selected=filters.scope valueAttr="value" labelAttr="label"}}
                </select>
            </label>
            <label class="chronicle-ledger__year-filter">
                <span>From year</span>
                <input type="number" min="{{minYear}}" max="{{maxYear}}" value="{{filters.yearFrom}}" placeholder="{{minYear}}" data-chronicle-filter="yearFrom">
            </label>
            <label class="chronicle-ledger__year-filter">
                <span>To year</span>
                <input type="number" min="{{minYear}}" max="{{maxYear}}" value="{{filters.yearTo}}" placeholder="{{maxYear}}" data-chronicle-filter="yearTo">
            </label>
            <button type="button" data-action="resetFilters" {{#unless hasFilters}}disabled{{/unless}}><i class="fas fa-rotate-left"></i> Clear</button>
            <p class="chronicle-ledger__result-count">Showing <strong>{{visibleEvents}}</strong> of {{totalEvents}} events</p>
        </section>

        <main class="chronicle-ledger__record">
            {{> "modules/augur-nexus/templates/region-population/chronicle-event-list.hbs" years=years}}
        </main>
    {{else}}
        <div class="chronicle-ledger__empty">
            <i class="fas fa-book-open"></i>
            <h2>This Chronicle could not be found</h2>
            <p>The regional record may have been cleared or deleted.</p>
        </div>
    {{/if}}
</div>
