Alert

<.alert>This is a default alert message.</.alert>

<.alert>Default alert message</.alert>
<.alert color="primary">Primary alert message</.alert>
<.alert color="info">Info alert message</.alert>
<.alert color="success">Success alert message</.alert>
<.alert color="warning">Warning alert message</.alert>
<.alert color="danger">Danger alert message</.alert>

<.alert color="success" title="Success!">
  Your changes have been saved successfully.
</.alert>

<.alert color="warning" title="Warning">
  Please review your information before submitting.
</.alert>

<.alert color="danger" title="Error">
  An error occurred while processing your request.
</.alert>

<.alert color="info" title="Info">
  New features are available in the latest update.
</.alert>

<.alert color="success" title="Profile Updated" subtitle="Account Settings">
  Your profile changes have been saved successfully.
</.alert>

<.alert color="warning" title="Scheduled Maintenance" subtitle="System Update">
  The system will be unavailable on Saturday from 2 AM to 4 AM.
</.alert>

<.alert color="info" title="New Version Available" subtitle="Update Required">
  Please update to the latest version for security improvements.
</.alert>

<.alert color="success">
  <:icon>
    <.icon name="hero-check-circle" class="size-5" />
  </:icon>
  Custom success icon with checkmark.
</.alert>

<.alert color="warning">
  <:icon>
    <.icon name="hero-light-bulb" class="size-5" />
  </:icon>
  Custom warning with lightbulb icon.
</.alert>

<.alert color="info">
  <:icon>
    <.icon name="hero-bell" class="size-5" />
  </:icon>
  Custom notification bell icon.
</.alert>

<.alert color="info" hide_icon>
  This alert has no icon displayed.
</.alert>

<.alert color="success" title="Success" hide_icon>
  Alert with title but no icon.
</.alert>

<.alert color="info" hide_close>
  This alert cannot be dismissed.
</.alert>

<.alert color="warning" title="Important Notice" hide_close>
  This important alert cannot be closed.
</.alert>

<.alert color="warning" title="Unsaved Changes">
  You have unsaved changes that will be lost.

  <div class="mt-3 flex space-x-2">
    <.button size="xs" color="warning">Save Changes</.button>
    <.button size="xs" variant="ghost">Discard</.button>
  </div>
</.alert>

<.alert color="info" title="Session Expiring">
  Your session will expire in 5 minutes.

  <div class="mt-3">
    <.button size="xs" color="info">Extend Session</.button>
  </div>
</.alert>

<.alert color="info" title="Pro Tip">
  You can use keyboard shortcuts to navigate faster:

  <ul class="mt-2 text-sm space-y-1 list-disc list-inside">
    <li><kbd class="px-1 py-0.5 bg-black/10 rounded text-xs">Ctrl</kbd> + <kbd class="px-1 py-0.5 bg-black/10 rounded text-xs">K</kbd> to open search</li>
    <li><kbd class="px-1 py-0.5 bg-black/10 rounded text-xs">Esc</kbd> to close modals</li>
  </ul>
</.alert>

<.alert color="success">
  <div class="flex items-start space-x-3">
    <:icon>
      <.icon name="hero-check-circle" class="size-5 flex-shrink-0 mt-0.5" />
    </:icon>
    <div>
      <h4 class="font-semibold text-sm">Order Confirmed</h4>
      <p class="mt-1 text-sm">Your order #12345 has been processed and will ship within 2-3 business days.</p>
      <div class="mt-2">
        <.button size="xs" variant="ghost">Track Order</.button>
      </div>
    </div>
  </div>
</.alert>

<.alert color="info" class="rounded-none border-x-0">
  <div class="text-center">
    Special offer: Get 50% off your first month! Use code WELCOME50.
    <.button size="sm" variant="ghost" class="ml-2">
      Learn More
    </.button>
  </div>
</.alert>

<.alert color="success" class="border-l-4 border-l-green-500">
  Custom styled alert with left border accent.
</.alert>

<.alert color="warning" class="rounded-xl shadow-lg">
  Alert with custom rounded corners and shadow.
</.alert>

<.alert color="danger" hide_close title="Please fix the following errors:">
  <div class="space-y-1">
    <ul class="text-sm list-disc list-inside space-y-1">
      <li>Email is required</li>
      <li>Password must be at least 8 characters</li>
      <li>Name cannot be blank</li>
    </ul>
  </div>
</.alert>