<div class="rtds-file {{ status }}" id="file-{{ id }}">
  <!-- Icona del file -->
  {% render '@icon', {
    id: 'outline--document-text',
    size: 'rtds-w-6 rtds-h-6 md:rtds-w-8 md:rtds-h-8',
    classes: 'rtds-file__icon rtds-flex-shrink-0'
  }, true %}

  <div class="rtds-file__info">
    <!-- Informazioni del file -->
    <p class="rtds-file__name rtds-text-sm rtds-font-bold rtds-mb-1">{{ name }}</p>
      <!-- Barra di progresso (per stati loading) -->
    {% if (status == 'is-loading' or status == 'is-loading-error' or status == 'is-loading-completed') and progress %}
      <div class="rtds-file__progress">
        <div class="rtds-file__progress-bar" 
            role="progressbar" 
            style="--file-progress-bar-width: {{ progress }}%" 
            aria-valuenow="{{ progress }}" 
            aria-valuemin="0" 
            aria-valuemax="100">
        </div>
      </div>
    {% endif %}

    {% if size or errorMessage or status != 'is-download' %}
      <p class="rtds-file__status" aria-live="polite">
       
          <span class="rtds-sr-only">
            {% if status == 'is-loading' %}
              Caricamento file in corso:  {{ name }} - 
            {% elif status == 'is-loading-error' %}
              Errore caricamento file:  {{ name }} - 
            {% elif status == 'is-loading-completed' %}
              Caricamento file completato:  {{ name }} - 
            {% endif %}
  
          </span>

        {% if size %}
          <span class="rtds-file__weight rtds-text-xs rtds-font-medium">{{ size }}</span>
        {% endif %}
       
        
        {% if status == 'is-loading-error' and errorMessage %}
            <!-- Messaggio di errore -->   
          <span class="rtds-file__error rtds-text-xs rtds-font-bold rtds-content-error">           
            {{ errorMessage }}
          </span>
        {% endif %}

      </p>
      {% endif %}

  </div>
  <!-- Azioni in base allo stato -->
  {% if status == 'is-loading' %}
    <!-- Loading: solo pulsante cancella -->
    {% render '@button--icon',
      {
        label: 'Annulla caricamento file ' + name,
        icon: 'outline--x-circle',
        iconSize: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01'
      },
      true %}

  {% elif status == 'is-loading-error' %}
    <!-- Loading Error: icona errore + pulsante cancella -->
    <div class="rtds-flex rtds-items-center rtds-gap-2">
      {% render '@icon', {
        id: 'outline--exclamation-circle',
        size: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-text-error'
      }, true %}

      {% render '@button--icon',
      {
        label: 'Annulla caricamento file ' + name,
        icon: 'outline--x-circle',
        iconSize: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01'
      },
      true %}
    </div>

  {% elif status == 'is-loading-completed' %}
    <!-- Loading Completed: icona check + pulsante cancella -->
    <div class="rtds-flex rtds-items-center rtds-gap-2">
      {% render '@icon', {
        id: 'outline--check-circle',
        size: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-text-success'
      }, true %}

      {% render '@button--icon',
      {
        label: 'Annulla caricamento file ' + name,
        icon: 'outline--x-circle',
        iconSize: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01'
      },
      true %}
    </div>

  {% elif status == 'is-download' %}
    <!-- Download: pulsante scarica + pulsante elimina -->
    <div class="rtds-flex rtds-items-center rtds-gap-2">

      {% render '@button--icon',
      {
        label: 'Scarica il file ' + name,
        icon: 'outline--arrow-down-tray',
        iconSize: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01'
      },
      true %}

      {% render '@button--icon',
      {
        label: 'Elimina il file ' + name,
        icon: 'outline--trash',
        iconSize: 'rtds-w-6 rtds-h-6',
        classes: 'rtds-btn--outlined rtds-border-none rtds-flex-shrink-0 rtds-content-01'
      },
      true %}
    </div>
  {% endif %}




</div>