{% set fieldTypeName = fieldCatalog[campo.campo]|default(campo.campo) %}
{% set currentFontSize = campo.fontSize|default('10.00') %}
{% set currentFontFamily = campo.fontFamily|default('Arial') %}
{% set knownSizes = fontSizes|map(size => size ~ '.00') %}
<details class="voucher-field-card" data-field-row="{{ index }}" data-field-type="{{ campo.campo }}">
  <input type="hidden" name="campos[{{ index }}][campo]" value="{{ campo.campo }}" data-field-type-input>
  <summary class="voucher-field-card__summary">
    <span class="voucher-field-card__marker" aria-hidden="true"><i class="bi bi-chevron-right"></i></span>
    <span class="voucher-field-card__titles">
      <span class="voucher-field-card__type" data-field-type-label>{{ fieldTypeName }}</span>
      <span class="voucher-field-card__name" data-field-row-name>{{ campo.etiqueta }}</span>
    </span>
  </summary>

  <div class="voucher-field-card__body">
    <div class="voucher-field-card__row">
      <label class="voucher-field-card__grow">
        <span class="voucher-field-card__label">Lo que se imprime</span>
        <input name="campos[{{ index }}][etiqueta]" value="{{ campo.etiqueta }}" maxlength="120"
               class="voucher-input" data-field-label-input
               placeholder="{% if campo.campo == 'texto' %}Texto fijo{% else %}Ejemplo: Fecha: {valor}{% endif %}">
      </label>
      <label class="voucher-field-card__check">
        <input type="checkbox" name="campos[{{ index }}][visible]" value="1" {% if campo.visible %}checked{% endif %}>
        <span>Imprimir</span>
      </label>
    </div>
    {% if campo.campo != 'texto' %}
      <p class="voucher-field-card__hint">Escribe <code>{valor}</code> donde va el dato real. Si lo dejas solo con <code>{valor}</code>, se imprime unicamente el dato.</p>
    {% endif %}

    <fieldset class="voucher-field-card__fieldset">
      <legend class="voucher-field-card__legend">Posicion y tamano <span class="voucher-field-card__unit-note">en <span data-unit-label>{{ unidad }}</span></span></legend>
      <div class="voucher-field-card__grid">
        <label>
          <span class="voucher-field-card__label">X (desde la izquierda)</span>
          <span class="voucher-measure">
            <input name="campos[{{ index }}][x]" type="number" inputmode="decimal" min="0" step="0.01" required value="{{ campo.x }}" class="voucher-input" data-layout-measurement data-field-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ unidad }}</span>
          </span>
        </label>
        <label>
          <span class="voucher-field-card__label">Y (desde arriba)</span>
          <span class="voucher-measure">
            <input name="campos[{{ index }}][y]" type="number" inputmode="decimal" min="0" step="0.01" required value="{{ campo.y }}" class="voucher-input" data-layout-measurement data-field-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ unidad }}</span>
          </span>
        </label>
        <label>
          <span class="voucher-field-card__label">Ancho</span>
          <span class="voucher-measure">
            <input name="campos[{{ index }}][width]" type="number" inputmode="decimal" min="0.01" step="0.01" required value="{{ campo.width }}" class="voucher-input" data-layout-measurement data-field-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ unidad }}</span>
          </span>
        </label>
        <label>
          <span class="voucher-field-card__label">Alto</span>
          <span class="voucher-measure">
            <input name="campos[{{ index }}][height]" type="number" inputmode="decimal" min="0.01" step="0.01" required value="{{ campo.height }}" class="voucher-input" data-layout-measurement data-field-measurement>
            <span class="voucher-measure__unit" data-unit-label>{{ unidad }}</span>
          </span>
        </label>
      </div>
    </fieldset>

    <fieldset class="voucher-field-card__fieldset">
      <legend class="voucher-field-card__legend">Letra</legend>
      <div class="voucher-field-card__grid voucher-field-card__grid--three">
        <label>
          <span class="voucher-field-card__label">Tamano <span class="voucher-field-card__unit-note">en puntos</span></span>
          <select name="campos[{{ index }}][font_size]" class="voucher-input">
            {% if currentFontSize not in knownSizes %}
              <option value="{{ currentFontSize }}" selected>{{ currentFontSize }} pt</option>
            {% endif %}
            {% for size in fontSizes %}
              <option value="{{ size }}.00" {% if currentFontSize == size ~ '.00' %}selected{% endif %}>{{ size }} pt</option>
            {% endfor %}
          </select>
        </label>
        <label>
          <span class="voucher-field-card__label">Fuente</span>
          <select name="campos[{{ index }}][font_family]" class="voucher-input" style="font-family: {{ currentFontFamily }};">
            {% if currentFontFamily not in fontFamilyNames %}
              <option value="{{ currentFontFamily }}" selected>{{ currentFontFamily }}</option>
            {% endif %}
            {% for grupo in fontFamilies %}
              <optgroup label="{{ grupo.label }}">
                {% for family in grupo.families %}
                  <option value="{{ family }}" style="font-family: {{ family }};" {% if currentFontFamily == family %}selected{% endif %}>{{ family }}</option>
                {% endfor %}
              </optgroup>
            {% endfor %}
          </select>
        </label>
        <label>
          <span class="voucher-field-card__label">Alineacion</span>
          <select name="campos[{{ index }}][align]" class="voucher-input" data-field-align>
            <option value="left" {% if campo.align == 'left' %}selected{% endif %}>Izquierda</option>
            <option value="center" {% if campo.align == 'center' %}selected{% endif %}>Centro</option>
            <option value="right" {% if campo.align == 'right' %}selected{% endif %}>Derecha</option>
          </select>
        </label>
      </div>
    </fieldset>

    <div class="voucher-field-card__actions">
      <button type="button" class="btn btn-outline btn-sm" data-center-format-field>
        <i class="bi bi-align-center" aria-hidden="true"></i> Centrar
      </button>
      <button type="button" class="btn btn-outline btn-sm" data-duplicate-format-field>
        <i class="bi bi-copy" aria-hidden="true"></i> Duplicar
      </button>
      <button type="button" class="btn btn-outline-danger btn-sm" data-remove-format-field>
        <i class="bi bi-trash" aria-hidden="true"></i> Quitar
      </button>
    </div>
  </div>
</details>