<!-- INICIO: Alertas que cuentan algo -->
<section id="alertas-sweetalert" class="panel demo-card" data-component="alertas-sweetalert">
  <div class="panel-heading"><h2>Alertas que cuentan algo</h2></div>
  <div class="demo-row">
    <button class="btn lime" id="alert-success" type="button">Todo salió bien</button
    ><button class="btn outline" id="alert-info" type="button">Ver información</button
    ><button class="btn demo-danger" id="alert-error" type="button">Simular un error</button
    ><button class="btn outline" id="alert-form" type="button">Formulario en alerta</button>
  </div>
  <template id="alert-contact-template"
    ><form id="alert-contact-form" class="demo-form">
      <label
        >Nombre de tu proyecto<input
          class="demo-input"
          name="project"
          placeholder="Proyecto Aurora"
          maxlength="60"
          required /></label
      ><label
        >Prioridad<select class="demo-input" name="priority">
          <option>Normal</option>
          <option>Alta</option>
          <option>Baja</option>
        </select></label
      >
      <p class="muted">Este ejemplo no envía datos a ningún servidor.</p>
    </form></template
  ><output id="alert-form-result" class="demo-inline-output" aria-live="polite"></output>
</section>
<!-- FIN: Alertas que cuentan algo -->

<!-- INICIO: Confirmar antes de continuar -->
<section id="confirmacion-registro" class="panel demo-card" data-component="confirmacion-registro">
  <div class="panel-heading"><h2>Confirmar antes de continuar</h2></div>
  <div id="alert-record" class="demo-record">
    <span class="avatar">FA</span>
    <div>
      <strong>Factura de ejemplo #1042</strong>
      <p class="muted">Proyecto Aurora · $2,400.00</p>
    </div>
    <button id="alert-confirm" class="btn demo-danger" type="button">Archivar ejemplo</button>
  </div>
  <output id="alert-record-result" class="demo-alert success" aria-live="polite" hidden></output
  ><button id="restore-alert-record" class="btn outline mt-4" type="button">
    Restaurar ejemplo
  </button>
</section>
<!-- FIN: Confirmar antes de continuar -->

<!-- INICIO: Notificaciones sin interrumpir -->
<section id="notificaciones-notyf" class="panel demo-card" data-component="notificaciones-notyf">
  <div class="panel-heading"><h2>Notificaciones sin interrumpir</h2></div>
  <div class="demo-row">
    <button class="btn lime" data-notify="success" type="button">Éxito</button
    ><button class="btn outline" data-notify="info" type="button">Información</button
    ><button class="btn outline" data-notify="warning" type="button">Aviso</button
    ><button class="btn demo-danger" data-notify="error" type="button">Error</button
    ><button class="btn outline" id="notify-sticky" type="button">Notificación persistente</button
    ><button class="btn outline" id="dismiss-notifications" type="button">Cerrar todas</button>
  </div>
  <form id="notification-demo-form" class="demo-form mt-5">
    <label
      >Tu mensaje<input
        class="demo-input"
        name="message"
        placeholder="Tu reporte ya está listo"
        required
        maxlength="120"
    /></label>
    <div class="demo-row">
      <label class="demo-label-block"
        >Tipo<select class="demo-input" name="type">
          <option value="success">Éxito</option>
          <option value="info">Información</option>
          <option value="warning">Aviso</option>
          <option value="error">Error</option>
        </select></label
      ><button class="btn lime" type="submit">Mostrar mi mensaje</button>
    </div>
  </form>
</section>
<!-- FIN: Notificaciones sin interrumpir -->