{{!-- ======================== COMPOSANTS & INGRÉDIENTS ======================== --}}
<div class="cde-section-label">
  <i class="fas fa-flask"></i> {{ localize "CDE.Components2" }}
</div>

<div class="cde-components-grid">

  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-1.webp" alt="1" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}1" name="system.component.one.value" value="{{systemData.component.one.value}}" />
  </div>
  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-6.webp" alt="6" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}6" name="system.component.six.value" value="{{systemData.component.six.value}}" />
  </div>

  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-2.webp" alt="2" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}2" name="system.component.two.value" value="{{systemData.component.two.value}}" />
  </div>
  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-7.webp" alt="7" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}7" name="system.component.seven.value" value="{{systemData.component.seven.value}}" />
  </div>

  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-3.webp" alt="3" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}3" name="system.component.three.value" value="{{systemData.component.three.value}}" />
  </div>
  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-8.webp" alt="8" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}8" name="system.component.eight.value" value="{{systemData.component.eight.value}}" />
  </div>

  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-4.webp" alt="4" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}4" name="system.component.four.value" value="{{systemData.component.four.value}}" />
  </div>
  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-9.webp" alt="9" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}9" name="system.component.nine.value" value="{{systemData.component.nine.value}}" />
  </div>

  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-5.webp" alt="5" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}5" name="system.component.five.value" value="{{systemData.component.five.value}}" />
  </div>
  <div class="cde-component-cell">
    <img class="cde-component-die" src="systems/fvtt-chroniques-de-l-etrange/images/d10-0.webp" alt="0" />
    <input type="text" class="cde-component-input" placeholder="{{ localize 'CDE.Component' }}0" name="system.component.zero.value" value="{{systemData.component.zero.value}}" />
  </div>

</div>

<div class="cde-component-random-row">
  <button type="button" class="cde-btn-random-component" data-action="randomize-component"
          title="{{ localize 'CDE.ChanceThrow' }}">
    <i class="fas fa-dice"></i>
    <span>{{ localize "CDE.ChanceThrow" }}</span>
  </button>
</div>

{{!-- ======================== TYPES DE MAGIE ======================== --}}
<div class="cde-section-label cde-section-label--top-margin">
  <i class="fas fa-hat-wizard"></i> {{ localize "CDE.TypesOfMagic" }}
</div>

{{#each magicsDisplay as |magic key|}}
<div class="cde-magic-card cde-magic--{{key}}">

  <div class="cde-magic-header">
    <img class="cde-magic-aspect-icon" src="{{getMagicAspectIcon key}}" alt="{{getMagicAspectLabel key}}" />
    <div class="cde-magic-info">
      <span class="cde-magic-name">{{getMagicLabel key}}</span>
      <span class="cde-magic-aspect-name">{{getMagicAspectLabel key}}</span>
    </div>
    <input class="cde-circle-input cde-magic-value-input" type="number" min="0"
           name="system.magics.{{key}}.value" value="{{magic.value}}" />
    <a class="cde-roll-trigger cde-magic-roll-btn"
       data-libel-id="{{key}}-magic"
       title="{{ localize 'CDE.Roll' }} {{getMagicLabel key}}">
      <i class="fas fa-dice-d10"></i>
    </a>
    <label class="cde-magic-toggle" title="{{ localize 'CDE.PracticeSpecialty' }}">
      <input type="checkbox" name="system.magics.{{key}}.visible" {{checked magic.visible}} />
      <i class="fas {{#if magic.visible}}fa-chevron-up{{else}}fa-chevron-down{{/if}}"></i>
    </label>
  </div>

  {{#if magic.visible}}
  <div class="cde-magic-specialities">
    {{#each magic.speciality as |special key2|}}
    <div class="cde-magic-spec-row {{#if special.check}}cde-magic-spec-row--active{{/if}}">
      <label class="cde-magic-spec-check-label" title="{{ localize 'CDE.PracticeSpecialty' }}{{ getMagicSpecialityLabel key key2 }}">
        <input type="checkbox" name="system.magics.{{key}}.speciality.{{key2}}.check" {{checked special.check}} />
        <span class="cde-spec-checkbox-ui"></span>
      </label>
      <img class="cde-magic-spec-element" src="{{getMagicSpecialityElementIcon key key2}}"
           alt="{{getMagicSpecialityLabelElement key key2}}"
           title="{{getMagicSpecialityLabelElement key key2}}" />
      <span class="cde-magic-spec-polarity {{getMagicSpecialityClassIcon key key2}}">
        {{getMagicSpecialityLabelIcon key key2}}
      </span>
      <span class="cde-magic-spec-name">{{getMagicSpecialityLabel key key2}}</span>
      <a class="cde-roll-trigger cde-magic-spec-roll-btn"
         data-libel-id="{{key}}-magicspecial-{{key2}}"
         title="{{ localize 'CDE.DieSP' }}{{getMagicSpecialityLabel key key2}}">
        <i class="fas fa-dice-d10"></i>
      </a>
    </div>
    {{/each}}
  </div>
  {{/if}}

  {{!-- ======================== GRIMOIRE — sorts de cette discipline ======================== --}}
  <div class="cde-grimoire-section">
    <div class="cde-grimoire-header">
      <i class="fas fa-book-open"></i>
      <span>{{ localize "CDE.Grimoire" }}</span>
      <a class="cde-grimoire-add" data-action="create" data-type="spell" data-discipline="{{key}}"
         title="{{ localize 'CDE.SpellCreate' }}">
        <i class="fas fa-plus"></i>
      </a>
    </div>
    {{#if magic.grimoire.length}}
    <ul class="cde-grimoire-list">
      {{#each magic.grimoire as |spell|}}
      <li class="cde-grimoire-entry">
        <img class="cde-grimoire-img" src="{{spell.img}}" alt="{{spell.name}}" width="20" height="20" />
        <span class="cde-grimoire-name">{{spell.name}}</span>
        <span class="cde-grimoire-meta">
          {{#if spell.system.specialityname}}<em>{{spell.system.specialityname}}</em>{{/if}}
          <span class="cde-grimoire-diff" title="{{ localize 'CDE.Difficulty' }}">
            <i class="fas fa-layer-group"></i> {{spell.system.difficulty}}
          </span>
          <span class="cde-grimoire-hei" title="{{ localize 'CDE.HeiCost' }}">
            <i class="fas fa-fire"></i> {{spell.system.heiCost}}
          </span>
        </span>
        <div class="cde-grimoire-controls">
          <a class="item-control" data-action="edit" data-item-id="{{spell._id}}" title="{{ localize 'CDE.SpellEdit' }}"><i class="fas fa-edit"></i></a>
          <a class="item-control" data-action="delete" data-item-id="{{spell._id}}" title="{{ localize 'CDE.SpellDelete' }}"><i class="fas fa-trash"></i></a>
        </div>
      </li>
      {{/each}}
    </ul>
    {{else}}
    <p class="cde-grimoire-empty">{{ localize "CDE.GrimoireEmpty" }}</p>
    {{/if}}
  </div>

</div>
{{/each}}