<div {{#unless popOut}}id="simple-quest" {{/unless}}
  class="{{#if popOut}}windowed{{/if}} {{#unless hideCheckboxAutoHide}}prevent-auto-hide{{/unless}}" {{#unless
  popOut}}style="z-index: var(--z-index-window);position: absolute;width: 100vw;height: 100vh;" {{/unless}}>

  <!-- Config Settings Configuration Tabs -->
  <nav class="sheet-tabs tabs" data-group="sections">
    <div style="{{#if popOut}}display: none;{{/if}}" id="windowed-mode">
      <i class="fa-duotone fa-window"></i>
    </div>
    <a class="item" {{#unless enableQuests}}style="display: none;" {{/unless}} data-tab="quests">{{{localize
      tabNames.quests}}}</a>
    <a class="item" {{#unless enableLore}}style="display: none;" {{/unless}} data-tab="lore">{{{localize
      tabNames.lore}}}</a>
    <a class="item" {{#unless enableTimeline}}style="display: none;" {{/unless}} data-tab="timeline">{{{localize
      tabNames.timeline}}}</a>
    <a class="item" {{#unless enableMaps}}style="display: none;" {{/unless}} data-tab="map">{{{localize
      tabNames.map}}}</a>
    <a class="item" {{#unless enableAchievements}}style="display: none;" {{/unless}} data-tab="achievements">{{{localize
      tabNames.achievements}}}</a>
    <a class="item" {{#unless enableMyJournal}}style="display: none;" {{/unless}} data-tab="my-journal">{{{localize
      tabNames.my-journal}}}</a>
    <a class="item" {{#unless enablePartyJournal}}style="display: none;" {{/unless}}
      data-tab="party-journal">{{{localize
      tabNames.party-journal}}}</a>

  </nav>
  {{#if showHistory}}
  <div id="history" class="flexrow">
  </div>
  {{/if}}
  <section id="simple-quest-tabs" class="content">
    <!-- Quests Tab -->
    <div class="tab{{#unless showCompleted}} hide-completed{{/unless}}" data-tab="quests">
      <div class="simple-quest-grid">
        <div class="quest-list">
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
            <i class="fa-duotone {{#if showCompleted}}fa-check-square{{else}}fa-square{{/if}} quest-control"
              id="toggle-completed" data-tooltip="simple-quest.simple-quest.tooltip.toggle-completed"></i>
            <i id="add-page" data-tooltip="simple-quest.simple-quest.tooltip.add-quest"
              class="quest-control fa-duotone fa-file-circle-plus"></i>
            <i {{#unless isGM}}style="display: none" {{/unless}} class="quest-control fa-duotone fa-book-open"
              id="add-category" data-tooltip="simple-quest.simple-quest.tooltip.add-category"><i
                class="fas fa-plus"></i></i>
          </div>
          {{#each questJournals as |questCategory|}}
          <details {{#if questCategory._simpleQuestDetails}}open="true" {{/if}} class="quest-category"
            data-uuid="{{questCategory.uuid}}">
            <summary class="quest-category-summary" data-uuid="{{questCategory.uuid}}">{{{questCategory.name}}}
              ({{questCategory.questCount}}) </summary>
            <ul class="quest-category-list" data-uuid="{{questCategory.uuid}}">
              {{#each questCategory.sortedPages as |questPage|}}
              <li style="margin-left: calc(var(--simple-quest-font-size) * ({{questPage.title.level}} - 1));{{#unless ../../isGM}}{{#if questPage.flags.simple-quest.hidden}}display: none;
                {{/if}}{{/unless}}{{#unless questPage.canUserSee}}display: none;{{/unless}}"
                class="quest-item {{#if questPage.flags.simple-quest.completed}}completed{{/if}} {{#if questPage._tocArray.length}}has-details{{else}}no-details{{/if}} {{#if questPage.flags.simple-quest.hidden}}secret{{/if}}"
                data-uuid="{{questPage.uuid}}">
                {{#unless questPage._seen}}<i class="fa-solid fa-exclamation unread-quest"></i>{{/unless}}
                {{#if questPage._tocArray.length}}

                {{#if ../../isGM}}
                <div data-uuid="{{questPage.uuid}}"
                  class="quest-checkbox secret {{#if questPage.flags.simple-quest.hidden}}checked{{/if}}">
                  <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
                </div>
                {{/if}}

                <details class="multi-quest" {{#if questPage._simpleQuestDetails}}open="true" {{/if}}
                  data-uuid="{{questPage.uuid}}">
                  <summary class="quest-item" data-uuid="{{questPage.uuid}}">{{{questPage.name}}}</summary>
                  <ul>
                    {{#each questPage._tocArray as |subPage|}}
                    <li style="filter: brightness(calc( 1 - ({{subPage.level}} - 1 ) * 0.1 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{subPage.level}} - 1)); {{#if subPage._hidden}}{{#unless ../../../isGM}}display: none;
                      {{/unless}}{{/if}}"
                      class="quest-item sub-quest {{#if subPage._completed}}completed{{/if}} {{#if subPage._hidden}}secret{{/if}}"
                      data-uuid="{{questPage.uuid}}" data-anchor="{{subPage.slug}}">
                      {{#if ../../../isGM}}
                      <div data-uuid="{{questPage.uuid}}" data-anchor="{{subPage.slug}}"
                        class="quest-checkbox secret {{#if subPage._hidden}}checked{{/if}}">
                        <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
                      </div>
                      {{/if}}
                      {{{subPage.text}}}
                    </li>
                    {{/each}}
                </details>

                {{else}}

                {{#if ../../isGM}}
                <div data-uuid="{{questPage.uuid}}"
                  class="quest-checkbox secret {{#if questPage.flags.simple-quest.hidden}}checked{{/if}}">
                  <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
                </div>
                {{/if}}
                {{{questPage.name}}}

                {{/if}}

              </li>
              {{/each}}
            </ul>
          </details>
          {{/each}}
        </div>
        <div class="quest-details {{#if matchJournalStyle}}journal-entry dnd5e2-journal{{/if}}">
          <div class="quest-controls simple-quest-hidden">
            <select id="move">
              <option value="none">{{localize "simple-quest.simple-quest.move-to"}}</option>
              {{#each questJournals as |questCategory|}}
              <option value="{{questCategory.name}}">{{questCategory.name}}</option>
              {{/each}}
            </select>
            <i class="fa-duotone fa-eye simple-quest-show-players quest-control" {{#unless isGM}}style="display: none;"
              {{/unless}} data-tooltip="simple-quest.simple-quest.tooltip.show-players"></i>


            <i class="fa-duotone fa-message-captions quest-control" id="share-quest"
              data-tooltip="simple-quest.simple-quest.tooltip.share-quest"></i>
            <i class="fa-duotone fa-message-exclamation quest-control" id="mark-updated"
              data-tooltip="simple-quest.simple-quest.tooltip.mark-updated"></i>
            <i class="fa-duotone fa-pen-to-square quest-control" id="edit"
              data-tooltip="simple-quest.simple-quest.tooltip.edit"></i>
          </div>
          <div class="quest-contents {{#if matchJournalStyle}}journal-page-content{{/if}}"></div>
        </div>
      </div>
    </div>

    <!-- Lore Tab -->

    <div class="tab" data-tab="lore">
      <div class="simple-quest-grid">
        <div class="quest-list">
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
            <i id="add-page" data-tooltip="simple-quest.simple-quest.tooltip.add-lore"
              class="quest-control fa-duotone fa-file-circle-plus"></i>
            <i {{#unless isGM}}style="display: none" {{/unless}} class="quest-control fa-duotone fa-book-open"
              id="add-category" data-tooltip="simple-quest.simple-quest.tooltip.add-category"><i
                class="fas fa-plus"></i></i>
          </div>
          {{#each loreJournals as |questCategory|}}
          <details {{#unless questCategory.canUserSee}}style="display: none;" {{/unless}} {{#if
            questCategory._simpleQuestDetails}}open="true" {{/if}} class="quest-category"
            data-uuid="{{questCategory.uuid}}">
            <summary class="quest-category-summary" data-uuid="{{questCategory.uuid}}">{{{questCategory.name}}}
            </summary>
            <ul class="quest-category-list" data-uuid="{{questCategory.uuid}}">
              {{#each questCategory.sortedPages as |questPage|}}
              <li
                style="filter: brightness(calc( 1 - ({{questPage.title.level}} - 1 ) * 0.2 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{questPage.title.level}} - 1)); {{#unless questPage.canUserSee}}display: none;{{/unless}}"
                class="quest-item {{#if questPage._tocArray.length}}has-details{{else}}no-details{{/if}} {{#unless questPage.canPlayerSee}}secret{{/unless}}"
                data-uuid="{{questPage.uuid}}">
                {{#unless questPage._seen}}<i class="fa-solid fa-exclamation unread-quest"></i>{{/unless}}
                {{#if ../../isGM}}
                <div data-uuid="{{questPage.uuid}}"
                  class="quest-checkbox secret {{#unless questPage.canPlayerSee}}checked{{/unless}}">
                  <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
                </div>
                {{/if}}


                {{#if questPage._tocArray.length}}

                <details class="multi-quest" {{#if questPage._simpleQuestDetails}}open="true" {{/if}}
                  data-uuid="{{questPage.uuid}}">
                  <summary class="quest-item" data-uuid="{{questPage.uuid}}">{{{questPage.name}}}</summary>
                  <ul>
                    {{#each questPage._tocArray as |subPage|}}
                    {{#unless subPage.secret}}
                    <li class="quest-item sub-quest"
                      style="filter: brightness(calc( 1 - ({{subPage.level}} - 1 ) * 0.1 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{subPage.level}} - 1));"
                      data-uuid="{{questPage.uuid}}" data-anchor="{{subPage.slug}}">
                      {{{subPage.text}}}
                    </li>
                    {{/unless}}
                    {{/each}}
                </details>

                {{else}}
                {{{questPage.name}}}

                {{/if}}

              </li>
              {{/each}}
            </ul>
          </details>
          {{/each}}
        </div>
        <div class="quest-details {{#if matchJournalStyle}}journal-entry dnd5e2-journal{{/if}}">
          <div class="quest-controls">
            <select id="move" {{#unless isGM}}style="display: none;" {{/unless}}>
              <option value="none">{{localize "simple-quest.simple-quest.move-to"}}</option>
              {{#each loreJournals as |questCategory|}}
              <option value="{{questCategory.name}}">{{questCategory.name}}</option>
              {{/each}}
            </select>
            <i class="fa-duotone fa-eye simple-quest-show-players quest-control" {{#unless isGM}}style="display: none;"
              {{/unless}} data-tooltip="simple-quest.simple-quest.tooltip.show-players"></i>


            <i class="fa-duotone fa-users quest-control" id="configure-lore-permissions"
              data-tooltip="simple-quest.simple-quest.tooltip.configure-lore-permissions"></i>
            <i class="fa-duotone fa-pen-to-square quest-control" id="edit"
              data-tooltip="simple-quest.simple-quest.tooltip.edit"></i>
          </div>
          <div class="quest-contents {{#if matchJournalStyle}}journal-page-content{{/if}}"></div>
        </div>
      </div>
    </div>

    <!-- Timeline Tab -->

    <div class="tab" data-tab="timeline">
      <div class="simple-quest-grid compact">
        <div class="quest-list">
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
          </div>
          <ul>
            {{#each timelineJournal.sortedPages as |timeline|}}
            <li
              style="{{#if timeline.flags.simple-quest.timeline.isEra}}border-bottom: 1px solid {{timeline.flags.simple-quest.timeline.color}};{{/if}}{{#unless ../isGM}}{{#if timeline.flags.simple-quest.hidden}}display: none;{{/if}}{{/unless}}filter: brightness(calc( 1 - ({{timeline.title.level}} - 1 ) * 0.2 ) );"
              class="timeline-item {{#if timeline.flags.simple-quest.hidden}}secret{{/if}} {{#if timeline.flags.simple-quest.timeline.isEra}}is-era{{/if}}"
              data-uuid="{{timeline.uuid}}">
              {{#if ../isGM}}
              <div data-uuid="{{timeline.uuid}}"
                class="quest-checkbox secret {{#if timeline.flags.simple-quest.hidden}}checked{{/if}}">
                <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
              </div>
              {{/if}}
              {{{timeline.name}}}
            </li>
            {{/each}}
          </ul>
        </div>
        <div class="quest-details">
        </div>
      </div>
    </div>

    <!-- Map Tab -->

    <div class="tab" data-tab="map" id="map">
      <div class="simple-quest-grid {{#unless popOut}}compact{{/unless}}">
        <div class="maps-list">
          {{#if mapsJournal}}
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
            <i class="quest-control fa-duotone fa-question" id="map-help"
              data-tooltip="simple-quest.simple-quest.tooltip.map-help"></i>
            <i {{#unless isGM}}style="display: none" {{/unless}} class="quest-control fa-duotone fa-map" id="add-map"
              data-tooltip="simple-quest.simple-quest.tooltip.add-map"><i class="fas fa-plus"></i></i>
          </div>
          <ul class="maps-list-element">
            {{#each mapsJournal.sortedPages as |map|}}
            <li
              style="{{#unless ../isGM}}{{#if map.flags.simple-quest.hidden}}display: none;{{/if}}{{/unless}}filter: brightness(calc( 1 - ({{map.title.level}} - 1 ) * 0.2 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{map.title.level}} - 1))"
              class="map-item {{#if map.flags.simple-quest.hidden}}secret{{/if}}" data-uuid="{{map.uuid}}">
              {{#if ../isGM}}
              <div data-uuid="{{map.uuid}}"
                class="quest-checkbox secret {{#if map.flags.simple-quest.hidden}}checked{{/if}}">
                <div class="quest-checkbox-marker"><i class="fas fa-eye-slash"></i></div>
              </div>
              {{/if}}
              {{{map.name}}}
            </li>
            {{/each}}
          </ul>
          {{else}}
          <div class="no-maps">{{localize "simple-quest.simple-quest.no-maps"}}</div>
          {{/if}}
        </div>
        <div class="map-details">

        </div>
      </div>
    </div>

    <!-- Achievements Tab -->
    <div class="tab" data-tab="achievements" id="achievements">
      <div class="simple-quest-grid hidden-list">
        <div class="quest-details achievements-list {{#if matchJournalStyle}}journal-entry dnd5e2-journal{{/if}}">
          <div class="quest-controls">
            <i id="add-page" class="fa-duotone fa-plus quest-control" {{#unless isGM}}style="display: none;"
              {{/unless}}></i>
          </div>
          <div class="achievements-wrapper">
            {{#each achievementsJournal.sortedPages as |page|}}
            <div data-uuid="{{page.uuid}}" class="achievement-item {{#if page.isAwarded}}awarded{{/if}}"
              style="--achievement-color: {{page.achievementColor}}; {{#unless page.canUserSee}}display: none;{{/unless}}">
              <header>
                <img src="{{page.src}}" alt="">
                <div class="header-contents">
                  <h1 class="quest-header"
                    data-tooltip="{{#if page.isHiddenAchievement}}???{{else}}{{page.name}}{{/if}}">{{#if
                    page.isHiddenAchievement}}???{{else}}{{page.name}}{{/if}}</h1>
                  <div class="user-ownership">
                    {{#each page._userOwnership as |userOwnership|}}
                    <div
                      class="user-image-wrapper {{#if userOwnership.isOwner}}owner{{/if}} {{#if userOwnership.isObserver}}observer{{/if}}">
                      <img src="{{user.character.img}}" alt="" class="character-image">
                    </div>
                    {{/each}}
                  </div>
                </div>
              </header>
              <div class="achievements-content">
                {{#if page.isHiddenAchievement}}
                {{else}}
                {{{page.enrichedText}}}{{/if}}
              </div>
            </div>

            {{/each}}
          </div>
        </div>
      </div>
    </div>

    <!-- My Journal Tab -->
    <div class="tab" data-tab="my-journal" id="my-journal">
      <div class="simple-quest-grid">
        <div class="quest-list">
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
            <i id="add-page" data-tooltip="simple-quest.simple-quest.tooltip.add-page"
              class="quest-control fa-duotone fa-file-circle-plus"></i>
            <i class="quest-control fa-duotone fa-book-open" id="add-category"
              data-tooltip="simple-quest.simple-quest.tooltip.add-category"><i class="fas fa-plus"></i></i>
          </div>
          {{#each myJournals as |questCategory|}}
          <details {{#if questCategory._simpleQuestDetails}}open="true" {{/if}} class="quest-category"
            data-uuid="{{questCategory.uuid}}">
            <summary class="quest-category-summary" data-uuid="{{questCategory.uuid}}">{{{questCategory.name}}}
            </summary>
            <ul class="quest-category-list" data-uuid="{{questCategory.uuid}}">
              {{#each questCategory.sortedPages as |questPage|}}
              <li
                style="filter: brightness(calc( 1 - ({{questPage.title.level}} - 1 ) * 0.2 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{questPage.title.level}} - 1));"
                class="quest-item {{#if questPage._tocArray.length}}has-details{{else}}no-details{{/if}}"
                data-uuid="{{questPage.uuid}}">


                {{#if questPage._tocArray.length}}

                <details class="multi-quest" {{#if questPage._simpleQuestDetails}}open="true" {{/if}}
                  data-uuid="{{questPage.uuid}}">
                  <summary class="quest-item" data-uuid="{{questPage.uuid}}">{{{questPage.name}}}</summary>
                  <ul>
                    {{#each questPage._tocArray as |subPage|}}
                    <li class="quest-item sub-quest"
                      style="filter: brightness(calc( 1 - ({{subPage.level}} - 1 ) * 0.1 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{subPage.level}} - 1));"
                      data-uuid="{{questPage.uuid}}" data-anchor="{{subPage.slug}}">
                      {{{subPage.text}}}
                    </li>
                    {{/each}}
                </details>

                {{else}}
                {{{questPage.name}}}

                {{/if}}

              </li>
              {{/each}}
            </ul>
          </details>
          {{/each}}
        </div>
        <div class="quest-details {{#if matchJournalStyle}}journal-entry dnd5e2-journal{{/if}}">
          <div class="quest-controls">
            <select id="move" {{#unless isGM}}style="display: none;" {{/unless}}>
              <option value="none">{{localize "simple-quest.simple-quest.move-to"}}</option>
              {{#each myJournals as |questCategory|}}
              <option value="{{questCategory.name}}">{{questCategory.name}}</option>
              {{/each}}
            </select>


            <i class="fa-duotone fa-pen-to-square quest-control" id="edit"
              data-tooltip="simple-quest.simple-quest.tooltip.edit"></i>
          </div>
          <div class="quest-contents {{#if matchJournalStyle}}journal-page-content{{/if}}"></div>
        </div>
      </div>
    </div>

    <!-- Party Journal Tab -->
    <div class="tab" data-tab="party-journal" id="party-journal">
      <div class="simple-quest-grid">
        <div class="quest-list">
          <div class="quest-list-controls">
            <input type="search" placeholder="{{localize "FILES.Search"}}">
            <i id="add-page" data-tooltip="simple-quest.simple-quest.tooltip.add-page"
              class="quest-control fa-duotone fa-file-circle-plus"></i>
            <i class="quest-control fa-duotone fa-book-open" id="add-category"
              data-tooltip="simple-quest.simple-quest.tooltip.add-category"><i class="fas fa-plus"></i></i>
          </div>
          {{#each sharedJournals as |questCategory|}}
          <details {{#if questCategory._simpleQuestDetails}}open="true" {{/if}} class="quest-category"
            data-uuid="{{questCategory.uuid}}">
            <summary class="quest-category-summary" data-uuid="{{questCategory.uuid}}">{{{questCategory.name}}}
            </summary>
            <ul class="quest-category-list" data-uuid="{{questCategory.uuid}}">
              {{#each questCategory.sortedPages as |questPage|}}
              <li
                style="filter: brightness(calc( 1 - ({{questPage.title.level}} - 1 ) * 0.2 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{questPage.title.level}} - 1));"
                class="quest-item {{#if questPage._tocArray.length}}has-details{{else}}no-details{{/if}}"
                data-uuid="{{questPage.uuid}}">


                {{#if questPage._tocArray.length}}

                <details class="multi-quest" {{#if questPage._simpleQuestDetails}}open="true" {{/if}}
                  data-uuid="{{questPage.uuid}}">
                  <summary class="quest-item" data-uuid="{{questPage.uuid}}">{{{questPage.name}}}</summary>
                  <ul>
                    {{#each questPage._tocArray as |subPage|}}
                    <li class="quest-item sub-quest"
                      style="filter: brightness(calc( 1 - ({{subPage.level}} - 1 ) * 0.1 ) ); margin-left: calc(var(--simple-quest-font-size) * ({{subPage.level}} - 1));"
                      data-uuid="{{questPage.uuid}}" data-anchor="{{subPage.slug}}">
                      {{{subPage.text}}}
                    </li>
                    {{/each}}
                </details>

                {{else}}
                {{{questPage.name}}}

                {{/if}}

              </li>
              {{/each}}
            </ul>
          </details>
          {{/each}}
        </div>
        <div class="quest-details {{#if matchJournalStyle}}journal-entry dnd5e2-journal{{/if}}">
          <div class="quest-controls">
            <select id="move" {{#unless isGM}}style="display: none;" {{/unless}}>
              <option value="none">{{localize "simple-quest.simple-quest.move-to"}}</option>
              {{#each sharedJournals as |questCategory|}}
              <option value="{{questCategory.name}}">{{questCategory.name}}</option>
              {{/each}}
            </select>


            <i class="fa-duotone fa-pen-to-square quest-control" id="edit"
              data-tooltip="simple-quest.simple-quest.tooltip.edit"></i>
          </div>
          <div class="quest-contents {{#if matchJournalStyle}}journal-page-content{{/if}}"></div>
        </div>
      </div>
    </div>

  </section>

  <div class="font-controls">
    <i class="fa-duotone fa-font" id="font-size-decrease"></i>
    <i class="fa-duotone fa-font" id="font-size-increase"></i>
    <i class="fa-duotone fa-palette" {{#unless isGM}}style="display: none;" {{/unless}} id="theme-config"></i>
  </div>


</div>