<!-- INICIO: Iconos que hablan el mismo idioma -->
<section id="fontawesome-catalog" class="panel demo-card" data-component="fontawesome-catalog">
  <div class="panel-heading">
    <h2>Iconos que hablan el mismo idioma</h2>
    <span class="tag">Reutilizable</span>
  </div>
  <p class="demo-description">
    Selecciona un icono y consulta sus clases. Todos se sirven localmente con Font Awesome Free
    6.7.2.
  </p>
  <label class="demo-label-block"
    >Buscar iconos<input
      type="search"
      id="icon-search"
      class="demo-input"
      placeholder="Por ejemplo: tarjeta, equipo, carga" /></label
  ><output id="icon-count" class="demo-inline-output" role="status">24 iconos</output>
  <div class="icon-catalog">
    <button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-house"
      data-icon-name="Inicio fa-house"
      aria-pressed="true"
    >
      <i class="fa-solid fa-house" aria-hidden="true"></i><span>Inicio</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-chart-line"
      data-icon-name="Gráfica fa-chart-line"
      aria-pressed="false"
    >
      <i class="fa-solid fa-chart-line" aria-hidden="true"></i><span>Gráfica</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-wallet"
      data-icon-name="Billetera fa-wallet"
      aria-pressed="false"
    >
      <i class="fa-solid fa-wallet" aria-hidden="true"></i><span>Billetera</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-credit-card"
      data-icon-name="Tarjeta fa-credit-card"
      aria-pressed="false"
    >
      <i class="fa-solid fa-credit-card" aria-hidden="true"></i><span>Tarjeta</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-receipt"
      data-icon-name="Factura fa-receipt"
      aria-pressed="false"
    >
      <i class="fa-solid fa-receipt" aria-hidden="true"></i><span>Factura</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-money-bill-transfer"
      data-icon-name="Transferencia fa-money-bill-transfer"
      aria-pressed="false"
    >
      <i class="fa-solid fa-money-bill-transfer" aria-hidden="true"></i
      ><span>Transferencia</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-piggy-bank"
      data-icon-name="Ahorro fa-piggy-bank"
      aria-pressed="false"
    >
      <i class="fa-solid fa-piggy-bank" aria-hidden="true"></i><span>Ahorro</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-users"
      data-icon-name="Equipo fa-users"
      aria-pressed="false"
    >
      <i class="fa-solid fa-users" aria-hidden="true"></i><span>Equipo</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-user-shield"
      data-icon-name="Seguridad fa-user-shield"
      aria-pressed="false"
    >
      <i class="fa-solid fa-user-shield" aria-hidden="true"></i><span>Seguridad</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-sliders"
      data-icon-name="Configuración fa-sliders"
      aria-pressed="false"
    >
      <i class="fa-solid fa-sliders" aria-hidden="true"></i><span>Configuración</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-calendar-days"
      data-icon-name="Calendario fa-calendar-days"
      aria-pressed="false"
    >
      <i class="fa-solid fa-calendar-days" aria-hidden="true"></i><span>Calendario</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-bell"
      data-icon-name="Notificación fa-bell"
      aria-pressed="false"
    >
      <i class="fa-solid fa-bell" aria-hidden="true"></i><span>Notificación</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-magnifying-glass"
      data-icon-name="Buscar fa-magnifying-glass"
      aria-pressed="false"
    >
      <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i><span>Buscar</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-filter"
      data-icon-name="Filtrar fa-filter"
      aria-pressed="false"
    >
      <i class="fa-solid fa-filter" aria-hidden="true"></i><span>Filtrar</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-file-arrow-down"
      data-icon-name="Descargar fa-file-arrow-down"
      aria-pressed="false"
    >
      <i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i><span>Descargar</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-cloud-arrow-up"
      data-icon-name="Subir fa-cloud-arrow-up"
      aria-pressed="false"
    >
      <i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i><span>Subir</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-circle-check"
      data-icon-name="Completado fa-circle-check"
      aria-pressed="false"
    >
      <i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>Completado</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-triangle-exclamation"
      data-icon-name="Aviso fa-triangle-exclamation"
      aria-pressed="false"
    >
      <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i><span>Aviso</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-circle-info"
      data-icon-name="Información fa-circle-info"
      aria-pressed="false"
    >
      <i class="fa-solid fa-circle-info" aria-hidden="true"></i><span>Información</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-circle-notch"
      data-icon-name="Carga fa-circle-notch"
      aria-pressed="false"
    >
      <i class="fa-solid fa-circle-notch" aria-hidden="true"></i><span>Carga</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-arrows-rotate"
      data-icon-name="Sincronizar fa-arrows-rotate"
      aria-pressed="false"
    >
      <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i><span>Sincronizar</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-bookmark"
      data-icon-name="Marcador fa-bookmark"
      aria-pressed="false"
    >
      <i class="fa-solid fa-bookmark" aria-hidden="true"></i><span>Marcador</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-wand-magic-sparkles"
      data-icon-name="Personalizar fa-wand-magic-sparkles"
      aria-pressed="false"
    >
      <i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i
      ><span>Personalizar</span></button
    ><button
      type="button"
      class="icon-choice"
      data-icon-choice="fa-layer-group"
      data-icon-name="Componentes fa-layer-group"
      aria-pressed="false"
    >
      <i class="fa-solid fa-layer-group" aria-hidden="true"></i><span>Componentes</span>
    </button>
  </div>
  <p id="icon-empty" class="demo-inline-output" hidden>No se encontraron iconos.</p>
  <div class="icon-preview">
    <i id="icon-selected" class="fa-solid fa-house" aria-hidden="true"></i
    ><code id="icon-class" aria-live="polite">fa-solid fa-house</code>
  </div>
</section>

<!-- INICIO: Acciones, estados y botones -->
<section id="fontawesome-buttons" class="panel demo-card" data-component="fontawesome-buttons">
  <div class="panel-heading">
    <h2>Acciones, estados y botones</h2>
    <span class="tag">Reutilizable</span>
  </div>
  <p class="demo-description">
    Los iconos decorativos llevan aria-hidden. Los botones sin texto necesitan un nombre accesible.
  </p>
  <div class="demo-row">
    <button class="btn lime" type="button" data-demo-action="Ejemplo de descarga seleccionado.">
      <i class="fa-solid fa-file-arrow-down" aria-hidden="true"></i>Descargar reporte</button
    ><button class="btn outline" id="icon-favorite" type="button" aria-pressed="false">
      <i class="fa-regular fa-bookmark" aria-hidden="true"></i>Guardar ejemplo</button
    ><button
      class="icon-btn"
      type="button"
      aria-label="Añadir elemento de ejemplo"
      data-demo-action="Nuevo elemento de ejemplo."
    >
      <i class="fa-solid fa-plus" aria-hidden="true"></i>
    </button>
  </div>
  <output id="icon-favorite-status" class="demo-inline-output" role="status"
    >Ejemplo sin guardar.</output
  >
  <div class="demo-row mt-5">
    <span class="demo-badge"
      ><i class="fa-solid fa-circle-check" aria-hidden="true"></i> Completado</span
    ><span class="demo-badge warning"
      ><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> Pendiente</span
    ><span class="demo-badge neutral"
      ><i class="fa-solid fa-arrows-rotate fa-spin" aria-hidden="true"></i> Sincronizando</span
    >
  </div>
</section>

<!-- INICIO: Tamaños y estilos -->
<section id="fontawesome-sizes" class="panel demo-card" data-component="fontawesome-sizes">
  <div class="panel-heading">
    <h2>Tamaños y estilos</h2>
    <span class="tag">Reutilizable</span>
  </div>
  <p class="demo-description">
    La fuente hereda el color de su contenedor. Usa fa-lg, fa-2x o fa-3x y combina solid, regular y
    brands.
  </p>
  <div class="icon-size-demo">
    <span><i class="fa-solid fa-wallet fa-lg" aria-hidden="true"></i><small>fa-lg</small></span
    ><span><i class="fa-solid fa-wallet fa-2x" aria-hidden="true"></i><small>fa-2x</small></span
    ><span><i class="fa-solid fa-wallet fa-3x" aria-hidden="true"></i><small>fa-3x</small></span
    ><span
      ><i class="fa-regular fa-calendar fa-2x" aria-hidden="true"></i><small>Regular</small></span
    ><span><i class="fa-brands fa-github fa-2x" aria-hidden="true"></i><small>Brands</small></span>
  </div>
</section>

<script src="../assets/js/theme.js"></script>
<link rel="stylesheet" href="../assets/css/tailwind.css" />
<link rel="stylesheet" href="../assets/css/styles.css" />
<link rel="stylesheet" href="../assets/css/video.css" />
<link rel="stylesheet" href="../assets/css/appearance.css" />
<script defer="" src="../assets/js/shared.js"></script>
<script defer="" src="../assets/js/ui.js"></script>
<script defer="" src="../assets/js/appearance.js"></script>
<script defer="" src="../assets/js/components.js"></script>
<link rel="stylesheet" href="../assets/css/components.css" />
<link rel="stylesheet" href="../assets/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="../assets/css/media-components.css" />
<script defer src="../assets/js/icon-examples.js"></script>

// Font Awesome uses CSS and webfonts. JavaScript is only needed for these demo interactions.
(() => {
  const input = document.querySelector("#icon-search");
  const icons = [...document.querySelectorAll("[data-icon-choice]")];
  input.addEventListener("input", () => {
    const query = input.value.trim().toLocaleLowerCase("es");
    let count = 0;
    icons.forEach((button) => {
      button.hidden = !button.dataset.iconName.toLocaleLowerCase("es").includes(query);
      if (!button.hidden) count++;
    });
    document.querySelector("#icon-count").textContent = count + " iconos";
    document.querySelector("#icon-empty").hidden = count > 0;
  });
  icons.forEach((button) => {
    button.addEventListener("click", () => {
      document.querySelector("#icon-selected").className = "fa-solid " + button.dataset.iconChoice;
      document.querySelector("#icon-class").textContent = "fa-solid " + button.dataset.iconChoice;
      icons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
    });
  });
  document.querySelector("#icon-favorite").addEventListener("click", (event) => {
    const button = event.currentTarget;
    const pressed = button.getAttribute("aria-pressed") !== "true";
    button.setAttribute("aria-pressed", String(pressed));
    button.querySelector("i").className = (pressed ? "fa-solid" : "fa-regular") + " fa-bookmark";
    document.querySelector("#icon-favorite-status").textContent = pressed
      ? "Ejemplo guardado."
      : "Ejemplo sin guardar.";
  });
})();