<section class="demo-section">
  <h2>Alerts</h2>

  <div class="demo-row">
    <div class="alert alert-primary">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <div class="alert-content">Primary alert with default content.</div>
    </div>
  </div>

  <div class="demo-row">
    <div class="alert alert-success">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 4L12 14.01L9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <div class="alert-content">
        <div class="alert-title">Success</div>
        The operation completed successfully.
      </div>
    </div>
  </div>

  <div class="demo-row">
    <div class="alert alert-warning">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.29 3.86L1.82 18C1.645 18.3024 1.55298 18.6453 1.55201 18.9945C1.55105 19.3437 1.64118 19.6871 1.81443 19.9895C1.98768 20.2919 2.23771 20.5417 2.54035 20.7147C2.84299 20.8877 3.18665 20.9775 3.53599 21H20.464C20.8133 20.9775 21.157 20.8877 21.4596 20.7147C21.7623 20.5417 22.0123 20.2919 22.1856 19.9895C22.3588 19.6871 22.4489 19.3437 22.448 18.9945C22.447 18.6453 22.355 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2807 3.32312 12.9812 3.15549C12.6817 2.98785 12.3437 2.90134 12 2.90134C11.6563 2.90134 11.3183 2.98785 11.0188 3.15549C10.7193 3.32312 10.4683 3.56611 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <div class="alert-content">
        <div class="alert-title">Warning</div>
        Please review your settings before continuing.
      </div>
    </div>
  </div>

  <div class="demo-row">
    <div class="alert alert-danger">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 8V12M12 16H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <div class="alert-content">
        <div class="alert-title">Error</div>
        Something went wrong. Please try again.
      </div>
    </div>
  </div>

  <div class="demo-row">
    <div class="alert alert-info">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <div class="alert-content">
        <div class="alert-title">Info</div>
        Here is some useful information.
      </div>
    </div>
  </div>

  <h3>Vue alerts</h3>
  <div id="vue-alerts-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnAlert } from "/vue/index.js";

    createApp({
      components: { GnAlert },
      template: `
        <div class="demo-row demo-row-vertical">
          <gn-alert variant="success" title="Vue success" dismissible>Operation completed.</gn-alert>
          <gn-alert variant="warning">Vue warning alert.</gn-alert>
        </div>
      `
    }).mount("#vue-alerts-app");
  </script>
</section>