<section class="demo-section">
  <h2>File Upload & Attachment</h2>

  <div class="file-upload-panel">
    <div class="file-upload-form">
      <div class="file-upload-header">
        <div class="file-upload-heading">
          <h3 class="file-upload-title">Upload files</h3>
          <p class="file-upload-description">Attach documents, archives or images.</p>
        </div>
        <span class="badge badge-info">Optional</span>
      </div>

      <label class="file-upload-dropzone">
        <span class="file-upload-icon" aria-hidden="true"><i class="ph ph-cloud-arrow-up"></i></span>
        <span class="file-upload-body">
          <span class="file-upload-primary">Choose files</span>
          <span class="file-upload-secondary">Images get thumbnails, other files show their type.</span>
        </span>
        <input type="file" data-file-upload-input multiple>
      </label>

      <div data-file-upload-preview hidden class="file-upload-preview"></div>
    </div>
  </div>

  <h3>File attachment cards</h3>
  <div class="file-attachment-grid">
    <figure class="file-attachment">
      <div class="file-attachment-header">
        <span class="file-attachment-format">PDF</span>
        <button type="button" class="file-attachment-remove" aria-label="Remove document"><i class="ph ph-x"></i></button>
      </div>
      <div class="file-attachment-visual"><span class="file-attachment-type">PDF</span></div>
      <figcaption>
        <span class="file-attachment-name">Quarterly report.pdf</span>
        <span class="file-attachment-meta">PDF / 1.2 MB</span>
      </figcaption>
    </figure>

    <figure class="file-attachment is-placeholder">
      <div class="file-attachment-header">
        <span class="file-attachment-format">JPG</span>
        <button type="button" class="file-attachment-remove" aria-label="Remove image"><i class="ph ph-x"></i></button>
      </div>
      <div class="file-attachment-visual"></div>
      <figcaption>
        <span class="file-attachment-name">Preview loading...</span>
      </figcaption>
    </figure>

    <figure class="file-attachment is-error">
      <div class="file-attachment-header">
        <span class="file-attachment-format">DOCX</span>
        <button type="button" class="file-attachment-remove" aria-label="Remove document"><i class="ph ph-x"></i></button>
      </div>
      <div class="file-attachment-visual"><i class="ph ph-warning"></i></div>
      <figcaption>
        <span class="file-attachment-name">Upload failed.docx</span>
        <span class="file-attachment-meta">DOCX / 0 B</span>
      </figcaption>
    </figure>

    <figure class="file-attachment is-retry">
      <div class="file-attachment-header">
        <span class="file-attachment-format">ZIP</span>
        <button type="button" class="file-attachment-remove" aria-label="Remove archive"><i class="ph ph-x"></i></button>
      </div>
      <div class="file-attachment-visual"><i class="ph ph-arrows-clockwise"></i></div>
      <figcaption>
        <span class="file-attachment-name">Retry archive.zip</span>
        <span class="file-attachment-meta">ZIP / 4.5 MB</span>
      </figcaption>
    </figure>
  </div>
</section>