<form>

  <!-- Character Import Header -->
  <header class="sheet-header">
    <img class="character-icon" src="{{actor.prototypeToken.texture.src}}" data-edit="img">
    <h1 class="character-title">{{ actor.name }}</h1>
  </header>

  <hr>
    <div class="form-section">
    <div class="form-caption">
      URL
      <span class="dndbeyond-url-status">{{#if actor.flags.ddbimporter.dndbeyond.characterId}}<i
          class="fas fa-check-circle" style="color: green"></i>{{else}}<i></i>{{/if}}</span>
    </div>
    <div class="form-content" style="display: flex">
      <input type="text" name="dndbeyond-url" style="flex: 0 1 auto" ;
        value="{{#if actor.flags.ddbimporter.dndbeyond.url}}{{actor.flags.ddbimporter.dndbeyond.url}}{{/if}}" />
      <button type="button" id="open-dndbeyond-url" name="open-dndbeyond-url"
        style="flex-basis: 20px; flex-grow: 0;line-height: 20px;"
        {{#if actor.flags.ddbimporter.dndbeyond.characterId}}enabled{{else}}disabled{{/if}}>
        <i class="fas fa-external-link-alt"></i></button>
    </div>
    <div class="form-caption">
      Character ID
    </div>
    <div class="form-content">
      <span
        class="dndbeyond-character-id">{{#if actor.flags.ddbimporter.dndbeyond.characterId}}{{actor.flags.ddbimporter.dndbeyond.characterId}}{{else}}Not detected{{/if}}</span>
    </div>
  </div>

  <!-- Character Configuration Tabs -->
  <nav class="sheet-tabs tabs">
  {{#if importAllowed}}
    <a class="item active" data-tab="import"><i class="fas fa-arrow-alt-circle-down"></i> Import Character</a>
    <a class="item" data-tab="extras"><i class="fas fa-pastafarianism"></i> Import Companions</a>
  {{/if}}
    <a class="item" data-tab="sync"><i class="fas fa-arrow-alt-circle-up"></i> Update D&DBeyond</a>
  {{#if importAllowed}}
    <a class="item" data-tab="effects"><i class="fas fa-dna"></i> Automation</a>
    <a class="item" data-tab="config"><i class="fas fa-cogs"></i> Advanced</a>
  {{/if}}
    <a class="item" data-tab="help"><i class="fas fa-info-circle"></i> Help</a>
  </nav>

  <!-- Import Tab -->
  <section class="tab" data-tab="import">
  <div>
    <h3>Update selection</h3>
    <p>Only ticked items will be updated.</p>
    <div class="import-policy-group">
      {{#each importPolicies1}}
      <label class="import-policy"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
          name="character-import-policy-{{this.name}}" data-section="{{this.name}}">{{this.description}}
      </label>
      {{/each}}
    </div>
    <div class="import-policy-group">
      {{#each importPolicies2}}
      <label class="import-policy"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
          name="character-import-policy-{{this.name}}" data-section="{{this.name}}">{{this.description}}
      </label>
      {{/each}}
    </div>
    <hr>
    <div>
      <h3>Update configuration</h3>
      {{#each importConfig}}
      <label class="import-config"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
          name="character-import-policy-{{this.name}}" data-section="{{this.name}}"
          {{#if this.enabled}}enabled{{else}}disabled{{/if}}>{{this.description}}
      </label>
      {{/each}}
    </div>
    <hr>
    <div>
      <h3>Notes</h3>
      <p>To get full known spell lists for Clerics, Druids and Paladins set your cobalt cookie (in the module settings).<br>
          Use my <a href="https://github.com/MrPrimate/ddb-importer-chrome">Chrome extension</a> to get this!
      </p>
      <p>Having problems read the <a href="https://docs.ddb.mrprimate.co.uk/docs/faqs/ddb-importer">FAQ</a> and <a href="https://docs.ddb.mrprimate.co.uk/docs/category/ddb-importer">documentation</a>.</p>
      <p>While you wait, why not support me on <a href="https://www.patreon.com/MrPrimate">Patreon</a>?</p>
    </div>
    <hr>
    <div class="form-section">
      <div class="form-description">
        <div class="form-description"></div>
        <div>
          <button type="button" id="dndbeyond-character-import-start"
            {{#if actor.flags.ddbimporter.dndbeyond.characterId}}enabled{{else}}disabled{{/if}}>Start Import</button>
        </div>
      </div>
    </div>
</section>

  <!-- Advanced Configuration Tab -->
  <section class="tab" data-tab="config">
    <p>If you're using this module for the first time, you probably don't want to enable these.</p>
    {{#each advancedImportConfig}}
    <div class="advanced-import-config"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
        name="character-import-policy-{{this.name}}" id="character-import-policy-{{this.name}}" data-section="{{this.name}}"
        {{#if this.enabled}}enabled{{else}}disabled{{/if}}><b>{{this.title}}</b><p>{{{this.description}}}</p>
    </div>
    {{/each}}
    <hr>
    <h2>Enable Resource Selection Dialog</h2>
    <div class="resource-selection"><input {{#if resourceSelection}}checked{{/if}} type="checkbox"
        name="resource-selection" id="resource-selection" data-section="resource-selection"}>Display resource selection dialog?</p>
    </div>
    <div>
    <hr>
    <h2>Actor Specific Settings</h2>
    <p>You can save a Cobalt Cookie to use just for this character. This is saved in your browser and can only be used by you, on the current machine.</p>
    <div>
      <button type="button" id="delete-local-cobalt" {{#if cobaltSet}}enabled{{else}}disabled{{/if}}>Delete local Cobalt Cookie</button>
    </div>
    <div>
      <button type="button" id="set-local-cobalt">{{#if cobaltSet}}Update Cobalt Cookie{{else}}Add Cobalt Cookie{{/if}}</button>
    </div>
    <p>You can save a Patreon key to use just for this character. This is saved in your browser and can only be used by you, on the current machine to update the character back to DDB.</p>
    <div>
      <button type="button" id="delete-local-patreon-key" {{#if useLocalPatreonKey}}enabled{{else}}disabled{{/if}}>Delete local Patreon Key</button>
    </div>
    <div>
      <button type="button" id="set-local-patreon-key">{{#if useLocalPatreonKey}}Update Patreon Key{{else}}Add Patreon Key{{/if}}</button>
    </div>
  </section>

  <!-- Effects Configuration Tab -->
  <section class="tab" data-tab="effects">
    <p class="notification info">This section adds extra Automation Active Effects to imported content. Many of these are designed to work with <em>highly automated</em> games. Please read the descriptions carefully. Bugs to <a href="https://discord.gg/CpRtdK6wYq">Discord #auto-effect-bugs channel.</a></p>
    <p>{{{localize "ddb-importer.settings.user-hint-setting"}}}</p>
    <p>{{{localize "ddb-importer.settings.user-hint-animations"}}}</p>
    <button type="button" id="default-effects">Apply Recommended Active Effect/Automation Settings for the installed modules</button>
    <hr>
    <h2>Automation Options</h2>
    <p>{{{installedModulesText}}}</p>
    {{#each effectImportConfig}}
    <div class="effect-import-config"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
        name="character-import-policy-{{this.name}}" id="character-import-policy-{{this.name}}" data-section="{{this.name}}"
        {{#if this.enabled}}enabled{{else}}disabled{{/if}}><b>{{this.title}}</b>{{#if this.description}}<p>{{{this.description}}}</p>{{/if}}
    </div>
    {{/each}}
  </section>

<!-- Extras section -->
  <section class="tab" data-tab="extras">
<div>
    <h3>Configuration</h3>
    <div>
      {{#each extrasConfig}}
      <div class="extras-config"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
          name="character-extras-policy-{{this.name}}" data-section="{{this.name}}"
          {{#if this.enabled}}enabled{{else}}disabled{{/if}}>{{this.description}}
      </div>
      {{/each}}
    </div>
    <p>Extras can be added to your character sheet in D&D Beyond. These might be wild shapes, familiars, pets etc.</p>
    <p>DDB Importer will do it's best to import them into a folder in your world. We call them companions, but DDB Importer calls them Extras!</p>
    <hr>
    <div class="form-section">
      <div class="form-description">
        <div class="form-description"></div>
        <div>
          <button type="button" id="dndbeyond-character-extras-start"
            {{#if actor.flags.ddbimporter.dndbeyond.characterId}}enabled{{else}}disabled{{/if}}>
            {{#if actor.flags.ddbimporter.dndbeyond.characterId}}Import Extras{{else}}Please Import the Character First{{/if}}</button>
        </div>
      </div>
    </div>
  </div>

  </section>

<!-- Sync/Upload Tab -->
  <section class="tab" data-tab="sync">

    <h3>Update selection</h3>
    <p>Select the changes you wish to update on D&D Beyond.</p>
    <div class="sync-policy">
      {{#each syncConfig}}
      {{#if this.enabled}}
      <div class="sync-policy"><input {{#if this.isChecked}}checked{{/if}} type="checkbox"
          name="sync-policy-{{this.name}}" id="sync-policy-{{this.name}}" data-section="{{this.name}}"
          {{#if this.enabled}}enabled{{else}}disabled{{/if}}>{{this.description}}{{#if this.enabled}}{{else}} [Coming soon!]{{/if}}
      </div>
      {{/if}}
      {{/each}}
    </div>
  <hr>
  <p>Item update only works best with items imported from DDB into the Item Compendium or via a character.</p><p>If it comes from another source it will try to guess.</p>
  <div class="form-section">
      <div class="form-description">
        <div class="form-description"></div>
        <div>
          <button type="button" id="dndbeyond-character-update"
            {{#if syncEnabled}}enabled{{else if useLocalPatreonKey}}enabled{{else}}disabled{{/if}}>
            {{#if tiers.supporter}}
              {{#if itemsMunched}}Update D&D Beyond with changes{{else}}Please import D&D Beyond items and spells into your DDB compendiums first.{{/if}}
            {{else if useLocalPatreonKey}}
              {{#if itemsMunched}}Update D&D Beyond with changes{{else}}Your DM needs to import D&D Beyond items and spells into the DDB compendiums first.{{/if}}
            {{else}}D&D Beyond Update Available to Patreon Supporters{{/if}}</button>
        </div>
      </div>

    </div>
    {{#if dynamicUpdateAllowed}}
    <hr>
    <div class="form-section">
      <div class="form-description">
        <div>
          <input {{#if dynamicUpdateStatus}}checked{{/if}} type="checkbox"
          id="dndbeyond-character-dynamic-update"
          name="dndbeyond-character-dynamic-update"
          data-selection="dndbeyond-character-dynamic-update"
          {{#if dynamicUpdateAllowed}}enabled{{else}}disabled{{/if}}
          >Enable Dynamic Updates to D&D Beyond - sync above changes to D&D Beyond as they happen.
        </div>
      </div>
    </div>
    <p>Only a GM can (currently) dynamically sync changes, and must be logged in to do so.</p>
    {{#if dynamicUpdateAllowed}}{{else}}<p><b>Additional setup in module settings is required to configure this feature.</b></p>{{/if}}
    {{/if}}
  </section>

<!-- Help Tab -->
  <section class="tab" data-tab="help">
    <h3>Instructions</h3>
    <p>If you need help getting setup checkout the <a href="https://docs.ddb.mrprimate.co.uk/docs/category/ddb-importer">documentation</a> and the YouTube videos:</p>
    <ul>
      <li>MrPrimate's <a href="https://youtu.be/OMaJHLQORWo">Overview</a></li>
      <li>ClayGolem's <a href="https://youtu.be/-9a_PXePZI0">Guide</a></li>
      </ul>
    <h3>FAQ</h3>
    <ul>
      <li>Please see the <a href="https://docs.ddb.mrprimate.co.uk/docs/faqs/ddb-importer">FAQ page.</a></li>
    </ul>
    <h3>Troubleshooting</h3>
    <ul>
      <li>Make sure you're using the latest version.</li>
      <li>Check that your character is complete on D&D Beyond.</li>
      <li>Try unticking any option marked Experimental.</li>
      <li>Check your modules are upto date.</li>
      <li>Use <a href="https://foundryvtt.com/packages/find-the-culprit/">Find the Culprit</a> to see if the problem occurs with other modules disabled.</li>
      <li>Ask a question/submit a bug on <a href="https://discord.gg/WzPuRuDJVP">Discord</a>.</li>
      <li>Or submit a bug on <a href="https://github.com/MrPrimate/ddb-importer">GitHub</a>.</li>
    </ul>
    <h3>Community</h3>
    <ul>
      <li>Join us on <a href="https://discord.gg/WzPuRuDJVP">Discord</a></li>
      <li>Support me on <a href="https://patreon.com/MrPrimate">Patreon</a></li>
    </ul>
  </section>

<hr>

  <footer class="sheet-footer">
    <div class="task-name"></div>
  </footer>

</form>
