{#
  Boutons de sélection du type de dommage pour l'inspection véhicule.
  Params:
    controller: nom du contrôleur Stimulus (défaut: 'inspection')
  Usage : {% include 'components/_damage_type_buttons.html.twig' %}
          {% include 'components/_damage_type_buttons.html.twig' with { controller: 'contract-create' } %}
#}
{% set ctrl = controller ?? 'inspection' %}
{% set action_select = 'click->' ~ ctrl ~ '#inspectionSelectType' %}
{% if ctrl == 'inspection' %}{% set action_select = 'click->inspection#selectType' %}{% endif %}
<div class="d-flex flex-wrap align-items-center gap-1 mb-1">
    <span class="badge rounded-pill fw-semibold px-2 py-1"
          style="background:#e74c3c;cursor:pointer;font-size:.65rem;transition:transform .15s,box-shadow .15s,opacity .15s;user-select:none;white-space:nowrap"
          data-damage-type="rayure"
          data-damage-color="#e74c3c"
          data-action="{{ action_select }}"
          title="Cliquez pour sélectionner, puis cliquez sur le schéma">
        <i class="fas fa-minus me-1"></i>Rayure
    </span>
    <span class="badge rounded-pill fw-semibold px-2 py-1"
          style="background:#e67e22;cursor:pointer;font-size:.65rem;transition:transform .15s,box-shadow .15s,opacity .15s;user-select:none;white-space:nowrap"
          data-damage-type="bosse"
          data-damage-color="#e67e22"
          data-action="{{ action_select }}"
          title="Cliquez pour sélectionner, puis cliquez sur le schéma">
        <i class="fas fa-circle me-1" style="font-size:.55rem;vertical-align:middle"></i>Bosse
    </span>
    <span class="badge rounded-pill fw-semibold px-2 py-1"
          style="background:#3498db;cursor:pointer;font-size:.65rem;transition:transform .15s,box-shadow .15s,opacity .15s;user-select:none;white-space:nowrap"
          data-damage-type="bris"
          data-damage-color="#3498db"
          data-action="{{ action_select }}"
          title="Cliquez pour sélectionner, puis cliquez sur le schéma">
        <i class="fas fa-window-restore me-1"></i>Bris
    </span>
    <span class="badge rounded-pill fw-semibold px-2 py-1"
          style="background:#9b59b6;cursor:pointer;font-size:.65rem;transition:transform .15s,box-shadow .15s,opacity .15s;user-select:none;white-space:nowrap"
          data-damage-type="autre"
          data-damage-color="#9b59b6"
          data-action="{{ action_select }}"
          title="Cliquez pour sélectionner, puis cliquez sur le schéma">
        <i class="fas fa-exclamation me-1"></i>Autre
    </span>
</div>
<div class="text-muted mb-2" style="font-size:.7rem" {% if ctrl == 'inspection' %}data-inspection-target="hint"{% endif %}>
    <i class="fas fa-hand-pointer me-1 text-primary"></i>
    <strong>1.</strong> Sélectionnez un type &nbsp;
    <strong>2.</strong> Cliquez sur le schéma &nbsp;
    <strong>3.</strong> Clic droit pour supprimer
</div>