{% extends layout_path %}

{% load static %}
{% load i18n %}

{% block title %}Toasts - UI elements{% endblock %}

{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/notyf/notyf.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
{% endblock vendor_css %}

{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/notyf/notyf.js' %}"></script>
{% endblock vendor_js %}

{% block page_js %}
{{ block.super }}
<script src="{% static 'js/ui-toasts.js' %}"></script>
{% endblock page_js %}

{% block content %}
<!-- Toast with Animation -->
<div class="bs-toast toast toast-ex animate__animated my-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
  <div class="toast-header">
    <i class="icon-base ti tabler-bell icon-xs me-2"></i>
    <div class="me-auto fw-medium">Bootstrap</div>
    <small>11 mins ago</small>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<!--/ Toast with Animation -->

<!-- Toast with Placements -->
<div class="bs-toast toast toast-placement-ex m-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
  <div class="toast-header">
    <i class="icon-base ti tabler-bell icon-xs me-2"></i>
    <div class="me-auto fw-medium">Bootstrap</div>
    <small>11 mins ago</small>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<!-- Toast with Placements -->

<!-- Bootstrap Toasts with Animation -->
<div class="card mb-6">
  <h5 class="card-header">Bootstrap Toasts Example with Animation</h5>
  <div class="card-body">
    <div class="row gx-3 gy-2 align-items-center">
      <div class="col-md-3">
        <label class="form-label" for="selectType">Type</label>
        <select id="selectType" class="form-select color-dropdown">
          <option value="bg-primary" selected>Primary</option>
          <option value="bg-secondary">Secondary</option>
          <option value="bg-success">Success</option>
          <option value="bg-danger">Danger</option>
          <option value="bg-warning">Warning</option>
          <option value="bg-info">Info</option>
          <option value="bg-dark">Dark</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="selectAnimation">Animation</label>
        <select id="selectAnimation" class="form-select animation-dropdown">
          <optgroup label="Attention Seekers">
            <option value="animate__fade">fade</option>
            <option value="animate__bounce">bounce</option>
            <option value="animate__flash">flash</option>
            <option value="animate__pulse">pulse</option>
            <option value="animate__rubberBand">rubberBand</option>
            <option value="animate__shakeX">shake</option>
            <option value="animate__swing">swing</option>
            <option value="animate__tada" selected>tada</option>
            <option value="animate__wobble">wobble</option>
            <option value="animate__jello">jello</option>
            <option value="animate__heartBeat">heartBeat</option>
          </optgroup>

          <optgroup label="Bouncing Entrances">
            <option value="animate__bounceIn">bounceIn</option>
            <option value="animate__bounceInDown">bounceInDown</option>
            <option value="animate__bounceInLeft">bounceInLeft</option>
            <option value="animate__bounceInRight">bounceInRight</option>
            <option value="animate__bounceInUp">bounceInUp</option>
          </optgroup>

          <optgroup label="Fading Entrances">
            <option value="animate__fadeIn">fadeIn</option>
            <option value="animate__fadeInDown">fadeInDown</option>
            <option value="animate__fadeInDownBig">fadeInDownBig</option>
            <option value="animate__fadeInLeft">fadeInLeft</option>
            <option value="animate__fadeInLeftBig">fadeInLeftBig</option>
            <option value="animate__fadeInRight">fadeInRight</option>
            <option value="animate__fadeInRightBig">fadeInRightBig</option>
            <option value="animate__fadeInUp">fadeInUp</option>
            <option value="animate__fadeInUpBig">fadeInUpBig</option>
          </optgroup>

          <optgroup label="Flippers">
            <option value="animate__flip">flip</option>
            <option value="animate__flipInX">flipInX</option>
            <option value="animate__flipInY">flipInY</option>
          </optgroup>

          <optgroup label="Lightspeed">
            <option value="animate__lightSpeedInRight">lightSpeedIn</option>
          </optgroup>

          <optgroup label="Rotating Entrances">
            <option value="animate__rotateIn">rotateIn</option>
            <option value="animate__rotateInDownLeft">rotateInDownLeft</option>
            <option value="animate__rotateInDownRight">rotateInDownRight</option>
            <option value="animate__rotateInUpLeft">rotateInUpLeft</option>
            <option value="animate__rotateInUpRight">rotateInUpRight</option>
          </optgroup>

          <optgroup label="Sliding Entrances">
            <option value="animate__slideInUp">slideInUp</option>
            <option value="animate__slideInDown">slideInDown</option>
            <option value="animate__slideInLeft">slideInLeft</option>
            <option value="animate__slideInRight">slideInRight</option>
          </optgroup>

          <optgroup label="Zoom Entrances">
            <option value="animate__zoomIn">zoomIn</option>
            <option value="animate__zoomInDown">zoomInDown</option>
            <option value="animate__zoomInLeft">zoomInLeft</option>
            <option value="animate__zoomInRight">zoomInRight</option>
            <option value="animate__zoomInUp">zoomInUp</option>
          </optgroup>

          <optgroup label="Specials">
            <option value="animate__jackInTheBox">jackInTheBox</option>
            <option value="animate__rollIn">rollIn</option>
          </optgroup>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="showToastPlacement">&nbsp;</label>
        <button id="showToastAnimation" class="btn btn-primary d-block">Show Toast</button>
      </div>
    </div>
  </div>
</div>
<!--/ Bootstrap Toasts with Animation -->

<!-- Bootstrap Toasts with Placement -->
<div class="card mb-6">
  <h5 class="card-header">Bootstrap Toasts Example With Placement</h5>
  <div class="card-body">
    <div class="row gx-3 gy-2 align-items-center">
      <div class="col-md-3">
        <label class="form-label" for="selectTypeOpt">Type</label>
        <select id="selectTypeOpt" class="form-select color-dropdown">
          <option value="bg-primary" selected>Primary</option>
          <option value="bg-secondary">Secondary</option>
          <option value="bg-success">Success</option>
          <option value="bg-danger">Danger</option>
          <option value="bg-warning">Warning</option>
          <option value="bg-info">Info</option>
          <option value="bg-dark">Dark</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="selectPlacement">Placement</label>
        <select class="form-select placement-dropdown" id="selectPlacement">
          <option value="top-0 start-0">Top left</option>
          <option value="top-0 start-50 translate-middle-x">Top center</option>
          <option value="top-0 end-0">Top right</option>
          <option value="top-50 start-0 translate-middle-y">Middle left</option>
          <option value="top-50 start-50 translate-middle">Middle center</option>
          <option value="top-50 end-0 translate-middle-y">Middle right</option>
          <option value="bottom-0 start-0">Bottom left</option>
          <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
          <option value="bottom-0 end-0">Bottom right</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="showToastPlacement">&nbsp;</label>
        <button id="showToastPlacement" class="btn btn-primary d-block">Show Toast</button>
      </div>
    </div>
  </div>
</div>
<!--/ Bootstrap Toasts with Placement -->

<!-- Bootstrap Toasts Styles -->
<div class="card mb-6">
  <h5 class="card-header">Bootstrap Toasts Styles</h5>
  <div class="row g-0">
    <div class="col-md-6 p-6">
      <div class="small fw-medium mb-4">Default</div>
      <div class="toast-container position-relative">
        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close " data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close " data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small class="text-body-secondary">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
      </div>
    </div>
    <div class="col-md-6 ui-bg-overlay-container p-6">
      <div class="ui-bg-overlay bg-dark rounded-end-bottom"></div>
      <div class="text-white small fw-medium mb-4">Translucent</div>

      <div class="toast-container position-relative">
        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>

        <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
            <div class="me-auto fw-medium">Bootstrap</div>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--/ Bootstrap Toasts Styles -->

<!-- Notyf Demo -->
<div class="card">
  <h5 class="card-header">Notyf Notifications</h5>
  <div class="card-body">
    <div class="row">
      <!-- Message Input -->
      <div class="col-lg-6 col-xl-3">
        <div class="mb-4">
          <label class="form-label" for="message">Message</label>
          <textarea class="form-control" id="message" rows="3" placeholder="Enter a message..."></textarea>
        </div>
        <!-- Options -->
        <div class="mb-4">
          <div class="form-check">
            <input id="dismissible" class="form-check-input" type="checkbox" />
            <label class="form-check-label" for="dismissible">Dismissible</label>
          </div>
          <div class="form-check">
            <input id="ripple" class="form-check-input" type="checkbox" checked />
            <label class="form-check-label" for="ripple">Ripple Effect</label>
          </div>
        </div>
      </div>
      <!-- Type Selection -->
      <div class="col-lg-6 col-xl-3">
        <div class="mb-4" id="notificationTypeGroup">
          <label class="form-label">Notification Type</label>
          <div class="form-check">
            <input type="radio" id="successRadio" name="notificationType" class="form-check-input" value="success" checked />
            <label class="form-check-label" for="successRadio">Success</label>
          </div>
          <div class="form-check">
            <input type="radio" id="errorRadio" name="notificationType" class="form-check-input" value="error" />
            <label class="form-check-label" for="errorRadio">Error</label>
          </div>
          <div class="form-check">
            <input type="radio" id="infoRadio" name="notificationType" class="form-check-input" value="info" />
            <label class="form-check-label" for="infoRadio">Info</label>
          </div>
          <div class="form-check">
            <input type="radio" id="warningRadio" name="notificationType" class="form-check-input" value="warning" />
            <label class="form-check-label" for="warningRadio">Warning</label>
          </div>
          <div class="mb-4">
            <label class="form-label" for="duration">Duration (ms)</label>
            <input id="duration" type="number" class="form-control" placeholder="Enter duration in milliseconds" value="3000" />
          </div>
        </div>
      </div>
      <!-- Duration Input -->
      <div class="col">
        <label class="form-label">Position Type</label>
        <div class="row">
          <div class="col-6">
            <div class="form-check">
              <input id="positionleft" class="form-check-input" type="radio" name="positionx" value="left" />
              <label class="form-check-label" for="positionleft">left Position</label>
            </div>
            <div class="form-check">
              <input id="positioncenter" class="form-check-input" type="radio" name="positionx" value="center" />
              <label class="form-check-label" for="positioncenter">center Position</label>
            </div>
            <div class="form-check">
              <input id="positionright" class="form-check-input" type="radio" name="positionx" value="right" checked />
              <label class="form-check-label" for="positionright">right Position</label>
            </div>
          </div>
          <div class="col-6">
            <div class="form-check">
              <input id="positionTop" class="form-check-input" type="radio" name="positiony" value="top" checked />
              <label class="form-check-label" for="positionTop">Top Position</label>
            </div>
            <div class="form-check">
              <input id="positionBottom" class="form-check-input" type="radio" name="positiony" value="bottom" />
              <label class="form-check-label" for="positionBottom">Bottom Position</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="d-flex gap-3 flex-wrap">
      <button class="btn btn-primary" id="showNotification">Show Notification</button>
      <button class="btn btn-danger" id="clearNotifications">Clear Notifications</button>
    </div>
  </div>
</div>

<!--/ Notyf Demo -->
{% endblock %}