<form id="link-creation" class="{{cssClass}}" autocomplete="off">
  <div class='container'>

    <div class="form-group">
      <label>{{ localize 'CoC7.Type' }} :</label>
      <select name="type">
        {{selectOptions checkType selected=link.checkType valueAttr="key" nameAttr="key" labelAttr="label"}}
      </select>
    </div>

    {{#if link.isCheck}}
      <div class="form-group">
        <label>{{ localize 'CoC7.Check' }} :</label>
        <select name="check">
          {{selectOptions linkType selected=link.linkType valueAttr="key" nameAttr="key" labelAttr="label"}}
        </select>
      </div>

      {{#if link.isCharacteristicCheck}}
        <div class="form-group">
          <label>{{ localize 'CoC7.Characteristic' }} :</label>
          <select name="characteristicKey">
            {{selectOptions characteristicType selected=link.checkName valueAttr="key" nameAttr="key" labelAttr="label"}}
          </select>
        </div>
      {{/if}}

      {{#if link.isAttributeCheck}}
        <div class="form-group">
          <label>{{ localize 'CoC7.Attribute' }} :</label>
          <select name="attributeKey">
            {{selectOptions attributeType selected=link.checkName valueAttr="key" nameAttr="key" labelAttr="label"}}
          </select>
        </div>
      {{/if}}

      {{#if link.isSkillCheck}}
        <div class="form-group">
          <label>{{ localize 'CoC7.Name' }} :</label>
          <input type="text" name="checkName" value="{{link.checkName}}" required {{#if isSetFromGame}}readonly{{/if}} />
        </div>
      {{/if}}
    {{/if}}

    {{#if link.isItemCheck}}
      <div class="form-group">
        <label>{{ localize 'CoC7.Name' }} :</label>
        <input type="text" name="checkName" value="{{link.checkName}}" required {{#if isSetFromGame}}readonly{{/if}} />
      </div>
    {{/if}}

    {{#if link.isSanLossCheck}}
      <div class="form-group">
        <label>{{ localize 'CoC7.MinSanloss' }} :</label>
        <input type="text" name="sanMin" value="{{link.sanMin}}" required />
      </div>
      <div class="form-group">
        <label>{{ localize 'CoC7.MaxSanloss' }} :</label>
        <input type="text" name="sanMax" value="{{link.sanMax}}" required />
      </div>
      <div class="form-group">
        <label>{{ localize 'CoC7.SanityLossTypeReason' }} :</label>
        <input type="text" name="sanReason" value="{{link.sanReason}}" />
      </div>
    {{/if}}

    {{#if link.isEffect}}
      <div class="sheet effect-options">

        {{!-- Effect Configuration Tabs --}}
        <nav class="sheet-tabs tabs">
          <a class="item" data-tab="details"><i class="fas fa-book"></i> {{localize "EFFECT.TabDetails"}}</a>
          <a class="item" data-tab="duration"><i class="fas fa-clock"></i> {{localize "EFFECT.TabDuration"}}</a>
          <a class="item" data-tab="effects"><i class="fas fa-cogs"></i> {{localize "EFFECT.TabEffects"}}</a>
        </nav>

        {{!-- Details Tab --}}
        <section class="tab" data-tab="details">

          <div class="form-group">
            <label>{{ localize "EFFECT.Label" }}</label>
            <div class="form-fields">
              <input type="text" name="effect.label" value="{{ link.effect.label }}" />
            </div>
          </div>

          <div class="form-group">
            <label>{{ localize "EFFECT.Icon" }}</label>
            <div class="form-fields">
              {{filePicker target="effect.icon" type="image"}}
              <input class="image" type="text" name="effect.icon" placeholder="path/image.png" value="{{link.effect.icon}}" />
            </div>
          </div>

          <div class="form-group">
            <label>{{ localize "EFFECT.IconTint" }}</label>
            <div class="form-fields">
              <input class="color" type="text" name="effect.tint" value="{{link.effect.tint}}" />
              <input type="color" value="{{link.effect.tint}}" data-edit="effect.tint" />
            </div>
          </div>

          <div class="form-group">
            <label>{{ localize "EFFECT.Disabled" }}</label>
            <input type="checkbox" name="effect.disabled" {{ checked link.effect.disabled }} />
          </div>

          <div class="form-group">
            <label class="checkbox">
              <input type="checkbox" name="hasLabel" {{checked object.hasLabel}} /> {{ localize 'CoC7.Label' }}
            </label>
            {{#if object.hasLabel}}
              <div class="form-fields">
                <input type="text" name="displayName" value="{{link.displayName}}" />
              </div>
            {{/if}}
          </div>
        </section>

        {{!-- Duration Tab --}}
        <section class="tab" data-tab="duration">
          <div class="form-group">
            <label>{{ localize "EFFECT.DurationSecs" }}</label>
            <div class="form-fields">
              <input type="number" name="effect.duration.seconds" value="{{ link.effect.duration.seconds }}" />
            </div>
          </div>
          <hr />
          <div class="form-group">
            <label>{{ localize "EFFECT.DurationTurns" }}</label>
            <div class="form-fields">
              <label>{{ localize "COMBAT.Rounds" }}</label>
              <input type="number" name="effect.duration.rounds" value="{{ link.effect.duration.rounds }}" />
              <label>{{ localize "COMBAT.Turns" }}</label>
              <input type="number" name="effect.duration.turns" value="{{ link.effect.duration.turns }}" />
            </div>
          </div>
        </section>

        {{!-- Effects Tab --}}
        <section class="tab" data-tab="effects">
          <header class="effect-change effects-header flexrow-coc7">
            <div class="key">{{ localize "EFFECT.ChangeKey" }}</div>
            <div class="mode">{{ localize "EFFECT.ChangeMode" }}</div>
            <div class="value">{{ localize "EFFECT.ChangeValue" }}</div>
            <div class="effect-controls">
              <a class="effect-control" data-action="add"><i class="far fa-plus-square"></i></a>
            </div>
          </header>
          <ol class="changes-list">
            {{#each link.effect.changes as |change i|}}
              <li class="effect-change flexrow-coc7" data-index="{{i}}">
                <div class="key">
                  <input type="text" name="effect.changes.{{i}}.key" value="{{change.key}}" />
                </div>
                <div class="mode">
                  <select name="effect.changes.{{i}}.mode" data-dtype="Number">
                    {{selectOptions @root.effectModes selected=change.mode}}
                  </select>
                </div>
                <div class="value">
                  <input type="text" name="effect.changes.{{i}}.value" value="{{change.value}}" />
                </div>
                <div class="effect-controls">
                  <a class="effect-control" data-action="delete"><i class="fas fa-trash"></i></a>
                </div>
              </li>
            {{/each}}
          </ol>
        </section>
      </div>
    {{else}}
      {{!-- This is no longer used except in the @link format
      {{#if fromGame}}
        <div class="form-group" data-group="origin">
          <label class="checkbox">
            <input type="checkbox" name="fromCompendium" {{checked fromCompendium}} /> {{ localize 'SIDEBAR.TabCompendium' }}
          </label>
          <label class="checkbox">
            <input type="checkbox" name="fromDirectory" {{checked fromDirectory}} /> {{ localize 'DOCUMENT.Items' }}
          </label>
        </div>
        <div class="form-group stacked">
          {{#if (or fromDirectory fromCompendium)}}
            <div class='form-group subgroup'>
              <label>Id :</label>
              <input type="text" name="id" value="{{link.id}}" />
            </div>
          {{/if}}
          {{#if fromCompendium}}
            <div class='form-group subgroup'>
              <label>{{ localize 'SIDEBAR.TabCompendium' }} :</label>
              <input type="text" name="pack" value="{{link.pack}}" />
            </div>
          {{/if}}
        </div>
      {{/if}}
      --}}

      <div class="form-group" data-group="modifiers">
        {{#unless link.isItemCheck}}
          <label class="checkbox">
            <input type="checkbox" name="hasModifiers" {{checked object.hasModifiers}} /> {{ localize 'CoC7.Modifiers' }}
          </label>
        {{/unless}}
        {{#if link.isCheck}}
          <label class="checkbox">
            <input type="checkbox" name="blind" {{checked link.isBlind}} /> {{ localize 'CoC7.Blind' }}
          </label>
        {{/if}}
        <label class="checkbox">
          <input type="checkbox" name="hasLabel" {{checked object.hasLabel}} /> {{ localize 'CoC7.Label' }}
        </label>
        <label class="checkbox">
          <input type="checkbox" name="hasIcon" {{checked object.hasIcon}} /> {{ localize 'CoC7.Icon' }}
        </label>
      </div>

      {{#if object.hasModifiers}}
        <div class='form-group stacked'>
          <div class='form-group subgroup'>
            <label>{{localize 'CoC7.RollDifficulty'}}</label>
            <select name="difficulty">
              {{selectOptions difficultyLevels selected=link.difficulty localize=true valueAttr="key" nameAttr="key" labelAttr="label"}}
            </select>
          </div>
          <div class='form-group subgroup'>
            <label>{{localize 'CoC7.BonusDice'}}</label>
            <div class="penalty-selector">
              <div class="flexrow-coc7">
                <span style="flex: 1; text-align: left;">-2</span>
                <span style="flex: 1; text-align: center;"></span>
                <span style="flex: 1; text-align: center;">-1</span>
                <span style="flex: 1; text-align: center;"></span>
                <span style="flex: 1; text-align: center;">0</span>
                <span style="flex: 1; text-align: center;"></span>
                <span style="flex: 1; text-align: center;">+1</span>
                <span style="flex: 1; text-align: center;"></span>
                <span style="flex: 1; text-align: right;">+2</span>
              </div>
              <input type="range" name="modifier" min="-2" max="2" value="{{link.modifier}}">
            </div>
          </div>
        </div>
        <div class='form-group'>
          <label>{{localize 'CoC7.Pushing'}}</label>
          <label class="checkbox">
            <input type="checkbox" name="pushing" {{checked link.isPushing}} />
          </label>
        </div>
      {{/if}}

      {{#if object.hasLabel}}
        <div class="form-group">
          <label>{{ localize 'CoC7.Label' }} :</label>
          <input type="text" name="displayName" value="{{link.displayName}}" />
        </div>
      {{/if}}

      {{#if object.hasIcon}}
        <div class="form-group">
          <label>{{ localize 'CoC7.Icon' }} :</label>
          <input type="text" name="icon" value="{{link.icon}}" />
        </div>
      {{/if}}
    {{/if}}
  </div>

  {{!-- This is no longer needed as the bluring input boxes no longer submits the form, remove if people don't want it back
  {{#if link.link}}
    <div style="border: 1px solid #000;background-color: #fff;padding: 2px;margin: 3px 0;text-align: center;">{{link.link}}</div>
  {{/if}}
  --}}

  <button class="submit-button" type="submit" data-action="clipboard"><i class="fas fa-clipboard"></i>{{ localize 'CoC7.CopyToClipboard' }}</button>
  <button class="submit-button" type="submit" data-action="whisper-selected"><i class="far fa-object-group"></i>{{ localize 'CoC7.WhisperToSelection' }}</button>
  {{#if object.actors}}
    <button class="submit-button" type="submit" data-action="whisper-owner"><i class="fas fa-user"></i>{{ localize 'CoC7.WhisperTo'}} : {{actorNames}}</button>
  {{/if}}
  <button class="submit-button" type="submit" data-action="chat"><i class="fas fa-comments"></i>{{ localize 'CoC7.SendToChat' }}</button>
</form>