{% extends "base.html" %} 
{% load i18n %} 
 {% load static %}
 
{% block title %} {% translate "UI Components" %} - Eenos {% endblock %} {% block content %}

<!-- =========================================================
     PAGE HEADER
========================================================= -->

<div class="eenos-page-header">
  <div>
    <h1 class="eenos-page-title">{% translate "Websites" %}</h1>

    <div class="eenos-page-subtitle">{% translate "Manage websites hosted on this server" %}</div>
  </div>
</div>
<!-- =========================================================
     BREADCRUMB
========================================================= -->
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
  <a href="#"> {% translate "Dashboard" %} </a>

  <span class="eenos-breadcrumb-separator">
    <i data-lucide="chevron-right"></i>
  </span>

  <a href="#"> {% translate "Websites" %} </a>

  <span class="eenos-breadcrumb-separator">
    <i data-lucide="chevron-right"></i>
  </span>

  <a href="#"> {% translate "Domains" %} </a>

  <span class="eenos-breadcrumb-separator">
    <i data-lucide="chevron-right"></i>
  </span>

  <a href="#"> {% translate "example.com" %} </a>

  <span class="eenos-breadcrumb-separator">
    <i data-lucide="chevron-right"></i>
  </span>

  <a href="#"> {% translate "Settings" %} </a>

  <span class="eenos-breadcrumb-separator">
    <i data-lucide="chevron-right"></i>
  </span>

  <span class="eenos-breadcrumb-current"> {% translate "PHP Configuration" %} </span>
</nav>

{% include "includes/form_alerts.html" %}
<!-- =========================================================
     CARDS
========================================================= -->

<div class="eenos-section-title">{% translate "Cards" %}</div>

<div class="row g-3 mb-4">
  <!-- Basic Card -->

  <div class="col-12 col-md-6 col-xl-4">
    <div class="eenos-card h-100">
      <div class="eenos-panel-title">{% translate "Basic Card" %}</div>

      <div class="eenos-panel-subtitle mb-3">{% translate "A simple Eenos content card." %}</div>

      <p class="mb-3">{% translate "Cards can be used to group related information and actions." %}</p>

      <a href="#" class="btn btn-primary"> {% translate "View Details" %} </a>
    </div>
  </div>

  <!-- Metric Card -->

  <div class="col-12 col-md-6 col-xl-4">
    <div class="eenos-card eenos-metric-card h-100">
      <div class="eenos-metric-label">{% translate "TOTAL ACCOUNTS" %}</div>

      <div class="eenos-metric-value">1,248</div>

      <div class="eenos-metric-note">{% translate "Active hosting accounts" %}</div>
    </div>
  </div>

  <!-- Action Card -->

  <div class="col-12 col-md-6 col-xl-4">
    <div class="eenos-card h-100">
      <div class="d-flex align-items-start justify-content-between">
        <div>
          <div class="eenos-panel-title">{% translate "Create Account" %}</div>

          <div class="eenos-panel-subtitle">{% translate "Create a new hosting account." %}</div>
        </div>
        <i data-lucide="user-plus" class="eenos-card-action-icon"></i>
      </div>

      <div class="mt-3">
        <a href="#" class="btn btn-primary">
          <i data-lucide="plus"></i>
          {% translate "Create Account" %}
        </a>
      </div>
    </div>
  </div>
</div>

<!-- =========================================================
     FORM INPUTS
========================================================= -->

<div class="eenos-section-title">{% translate "Form Inputs" %}</div>

<div class="eenos-card mb-4">
  <div class="eenos-panel-title">{% translate "Account Information" %}</div>

  <div class="eenos-panel-subtitle mb-4">{% translate "Example form controls used throughout Eenos." %}</div>

  <form>
    <div class="row g-3">
      <!-- Text -->

      <div class="col-12 col-md-6">
        <label for="sampleName" class="form-label"> {% translate "Name" %} </label>

        <input type="text" class="form-control" id="sampleName" placeholder="{% translate 'Enter name' %}" />
      </div>

      <!-- Email -->

      <div class="col-12 col-md-6">
        <label for="sampleEmail" class="form-label"> {% translate "Email Address" %} </label>

        <input type="email" class="form-control" id="sampleEmail" placeholder="{% translate 'name@example.com' %}" />
      </div>

      <!-- Password -->

      <div class="col-12 col-md-6">
        <label for="samplePassword" class="form-label"> {% translate "Password" %} </label>

        <input type="password" class="form-control" id="samplePassword" placeholder="{% translate 'Enter password' %}" />
      </div>

      <!-- Select -->

      <div class="col-12 col-md-6">
        <label for="sampleSelect" class="form-label"> {% translate "Package" %} </label>

        <select class="form-select" id="sampleSelect">
          <option selected>{% translate "Select package" %}</option>

          <option>Starter</option>

          <option>Business</option>

          <option>Professional</option>
        </select>
      </div>

      <!-- Number -->

      <div class="col-12 col-md-6">
        <label for="sampleNumber" class="form-label"> {% translate "Disk Space" %} </label>

        <input type="number" class="form-control" id="sampleNumber" value="100" />
      </div>

      <!-- Date -->

      <div class="col-12 col-md-6">
        <label for="sampleDate" class="form-label"> {% translate "Expiry Date" %} </label>

        <input type="date" class="form-control" id="sampleDate" />
      </div>

      <!-- Textarea -->

      <div class="col-12">
        <label for="sampleDescription" class="form-label"> {% translate "Description" %} </label>

        <textarea class="form-control" id="sampleDescription" rows="4" placeholder="{% translate 'Enter description' %}"></textarea>
      </div>

      <!-- Checkbox -->

      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="sampleCheck" />

          <label class="form-check-label" for="sampleCheck"> {% translate "Enable this account" %} </label>
        </div>
      </div>

      <!-- Radio -->

      <div class="col-12">
        <label class="form-label d-block"> {% translate "Account Status" %} </label>

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="accountStatus" id="statusActive" checked />

          <label class="form-check-label" for="statusActive"> {% translate "Active" %} </label>
        </div>

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="accountStatus" id="statusSuspended" />

          <label class="form-check-label" for="statusSuspended"> {% translate "Suspended" %} </label>
        </div>
      </div>

      <!-- Range -->

      <div class="col-12 col-md-6">
        <label for="sampleRange" class="form-label"> {% translate "CPU Limit" %} </label>

        <input type="range" class="form-range" id="sampleRange" />
      </div>

      <!-- File -->

      <div class="col-12 col-md-6">
        <label for="sampleFile" class="form-label"> {% translate "Upload File" %} </label>

        <input class="form-control" type="file" id="sampleFile" />
      </div>

      <!-- Buttons -->

      <div class="col-12">
        <button type="submit" class="btn btn-primary">
          <i data-lucide="save"></i>
          {% translate "Save Changes" %}
        </button>

        <button type="button" class="btn btn-secondary ms-2">{% translate "Cancel" %}</button>
      </div>
    </div>
  </form>
</div>

<!-- Sample form  with pasrsely validation 
  -->
<form action=""
          class="create_user eenos-form"
          method="POST"
          name="edit_user"
          id="edit_user_form">
        {% csrf_token %} </form>

<!-- =========================================================
     ALERTS
========================================================= -->

<div class="eenos-section-title">{% translate "Alerts" %}</div>

<div class="eenos-card mb-4">
  <div class="alert alert-primary" role="alert">
    <strong>{% translate "Primary:" %}</strong>
    {% translate "This is a primary alert message." %}
  </div>

  <div class="alert alert-secondary" role="alert">
    <strong>{% translate "Secondary:" %}</strong>
    {% translate "This is a secondary alert message." %}
  </div>

  <div class="alert alert-success" role="alert">
    <strong>{% translate "Success:" %}</strong>
    {% translate "The operation completed successfully." %}
  </div>

  <div class="alert alert-danger" role="alert">
    <strong>{% translate "Danger:" %}</strong>
    {% translate "The operation could not be completed." %}
  </div>

  <div class="alert alert-warning" role="alert">
    <strong>{% translate "Warning:" %}</strong>
    {% translate "Please review this information before continuing." %}
  </div>

  <div class="alert alert-info" role="alert">
    <strong>{% translate "Information:" %}</strong>
    {% translate "Additional information is available." %}
  </div>

  <div class="alert alert-light" role="alert">
    <strong>{% translate "Light:" %}</strong>
    {% translate "This is a light alert message." %}
  </div>

  <div class="alert alert-dark mb-0" role="alert">
    <strong>{% translate "Dark:" %}</strong>
    {% translate "This is a dark alert message." %}
  </div>
</div>

<!-- =========================================================
     DISMISSIBLE ALERT
========================================================= -->

<div class="eenos-section-title">{% translate "Dismissible Alert" %}</div>

<div class="alert alert-success alert-dismissible fade show mb-4 eenos-alert" role="alert">
  <i data-lucide="check-circle" class="me-2"></i>

  <strong>{% translate "Success!" %}</strong>

  {% translate "Your changes have been saved successfully." %}

  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% translate 'Close' %}"></button>
</div>

<!-- =====================================================
         FEATURE TABLE
    ====================================================== -->

  <table id="eenos-data-table" class="table table-sm table-hover align-middle mb-0">
    <thead>
      <tr>
        <th>{% translate "Sl. No." %}</th>

        <th>{% translate "Feature Name" %}</th>

        <th>{% translate "Owner" %}</th>

        <th>{% translate "Addon Domains" %}</th>


        <th>{% translate "Backups" %}</th>

        <th class="text-end">{% translate "Action" %}</th>
      </tr>
    </thead>
  </table>

<!-- =========================================================
     RESPONSIVE TABLE
========================================================= -->

<div class="eenos-section-title">{% translate "Responsive Table" %}</div>

<div class="eenos-card mb-4">
  <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mb-3">
    <div>
      <div class="eenos-panel-title">{% translate "Hosting Accounts" %}</div>

      <div class="eenos-panel-subtitle">{% translate "Example responsive data table used throughout Eenos." %}</div>
    </div>

    <a href="#" class="btn btn-primary btn-sm">
      <i data-lucide="plus"></i>
      {% translate "Create Account" %}
    </a>
  </div>

  <!-- =======================================================
       RESPONSIVE TABLE
  ======================================================== -->

  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead>
        <tr>
          <th scope="col">{% translate "Domain" %}</th>

          <th scope="col">{% translate "Username" %}</th>

          <th scope="col">{% translate "Package" %}</th>

          <th scope="col">{% translate "Disk Usage" %}</th>

          <th scope="col">{% translate "Status" %}</th>

          <th scope="col" class="text-end">{% translate "Actions" %}</th>
        </tr>
      </thead>

      <tbody>
        <!-- Account 1 -->

        <tr>
          <td>
            <div class="fw-semibold">example.com</div>

            <div class="text-muted small">{% translate "Created today" %}</div>
          </td>

          <td>admin</td>

          <td>Professional</td>

          <td>12.4 GB</td>

          <td>
            <span class="badge text-bg-success"> {% translate "Active" %} </span>
          </td>

          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <a href="#" class="btn btn-outline-secondary" title="{% translate 'View' %}" aria-label="{% translate 'View' %}">
                <i data-lucide="eye"></i>
              </a>

              <a href="#" class="btn btn-outline-secondary" title="{% translate 'Edit' %}" aria-label="{% translate 'Edit' %}">
                <i data-lucide="pencil"></i>
              </a>
            </div>
          </td>
        </tr>

        <!-- Account 2 -->

        <tr>
          <td>
            <div class="fw-semibold">example.net</div>

            <div class="text-muted small">{% translate "Created yesterday" %}</div>
          </td>

          <td>client01</td>

          <td>Business</td>

          <td>6.8 GB</td>

          <td>
            <span class="badge text-bg-success"> {% translate "Active" %} </span>
          </td>

          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <a href="#" class="btn btn-outline-secondary" title="{% translate 'View' %}" aria-label="{% translate 'View' %}">
                <i data-lucide="eye"></i>
              </a>

              <a href="#" class="btn btn-outline-secondary" title="{% translate 'Edit' %}" aria-label="{% translate 'Edit' %}">
                <i data-lucide="pencil"></i>
              </a>
            </div>
          </td>
        </tr>

        <!-- Account 3 -->

        <tr>
          <td>
            <div class="fw-semibold">client-domain.org</div>

            <div class="text-muted small">{% translate "Created 2 days ago" %}</div>
          </td>

          <td>client02</td>

          <td>Starter</td>

          <td>2.1 GB</td>

          <td>
            <span class="badge text-bg-warning"> {% translate "Suspended" %} </span>
          </td>

          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <a href="#" class="btn btn-outline-secondary" title="{% translate 'View' %}" aria-label="{% translate 'View' %}">
                <i data-lucide="eye"></i>
              </a>

              <a href="#" class="btn btn-outline-secondary" title="{% translate 'Edit' %}" aria-label="{% translate 'Edit' %}">
                <i data-lucide="pencil"></i>
              </a>
            </div>
          </td>
        </tr>

        <!-- Account 4 -->

        <tr>
          <td>
            <div class="fw-semibold">customer.example</div>

            <div class="text-muted small">{% translate "Created 3 days ago" %}</div>
          </td>

          <td>customer01</td>

          <td>Enterprise</td>

          <td>48.6 GB</td>

          <td>
            <span class="badge text-bg-danger"> {% translate "Terminated" %} </span>
          </td>

          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <a href="#" class="btn btn-outline-secondary" title="{% translate 'View' %}" aria-label="{% translate 'View' %}">
                <i data-lucide="eye"></i>
              </a>

              <a href="#" class="btn btn-outline-secondary" title="{% translate 'Edit' %}" aria-label="{% translate 'Edit' %}">
                <i data-lucide="pencil"></i>
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- =======================================================
       PAGINATION
  ======================================================== -->

  <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3 mt-3">
    <div class="text-muted small">{% translate "Showing 1 to 4 of 1,248 accounts" %}</div>

    <nav aria-label="{% translate 'Account pagination' %}">
      <ul class="pagination pagination-sm mb-0">
        <li class="page-item disabled">
          <a class="page-link" href="#"> {% translate "Previous" %} </a>
        </li>

        <li class="page-item active">
          <a class="page-link" href="#"> 1 </a>
        </li>

        <li class="page-item">
          <a class="page-link" href="#"> 2 </a>
        </li>

        <li class="page-item">
          <a class="page-link" href="#"> 3 </a>
        </li>

        <li class="page-item">
          <a class="page-link" href="#"> {% translate "Next" %} </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- =========================================================
     TOASTS
========================================================= -->

<div class="eenos-section-title">{% translate "Toasts" %}</div>

<div class="eenos-card mb-4">
  <div class="eenos-panel-title mb-2">{% translate "Toast Notifications" %}</div>

  <div class="eenos-panel-subtitle mb-3">{% translate "Temporary notifications for background actions and status updates." %}</div>

  <button type="button" class="btn btn-success me-2" id="showSuccessToast">{% translate "Success Toast" %}</button>

  <button type="button" class="btn btn-danger me-2" id="showDangerToast">{% translate "Danger Toast" %}</button>

  <button type="button" class="btn btn-warning me-2" id="showWarningToast">{% translate "Warning Toast" %}</button>

  <button type="button" class="btn btn-info" id="showInfoToast">{% translate "Info Toast" %}</button>
</div>

<!-- =========================================================
     TOAST CONTAINER
========================================================= -->

<div class="toast-container eenos-toast-container position-fixed top-0 end-0 p-3" id="eenosToastContainer" style="z-index: 1090">
  <!-- Success -->

  <div id="successToast" class="toast eenos-toast eenos-toast-success" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i data-lucide="check-circle" class="eenos-toast-icon me-2"></i>

      <strong class="me-auto"> {% translate "Success" %} </strong>

      <small> {% translate "Just now" %} </small>

      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{% translate 'Close' %}"></button>
    </div>

    <div class="toast-body">{% translate "Your changes have been saved successfully." %}</div>
  </div>

  <!-- Danger -->

  <div id="dangerToast" class="toast eenos-toast eenos-toast-danger" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i data-lucide="circle-alert" class="eenos-toast-icon me-2"></i>

      <strong class="me-auto"> {% translate "Error" %} </strong>

      <small> {% translate "Just now" %} </small>

      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{% translate 'Close' %}"></button>
    </div>

    <div class="toast-body">{% translate "Unable to complete the requested operation." %}</div>
  </div>

  <!-- Warning -->

  <div id="warningToast" class="toast eenos-toast eenos-toast-warning" role="alert" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <i data-lucide="triangle-alert" class="eenos-toast-icon me-2"></i>

      <strong class="me-auto"> {% translate "Warning" %} </strong>

      <small> {% translate "Just now" %} </small>

      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{% translate 'Close' %}"></button>
    </div>

    <div class="toast-body">{% translate "Please review the information before continuing." %}</div>
  </div>

  <!-- Info -->

  <div id="infoToast" class="toast eenos-toast eenos-toast-info" role="alert" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <i data-lucide="info" class="eenos-toast-icon me-2"></i>

      <strong class="me-auto"> {% translate "Information" %} </strong>

      <small> {% translate "Just now" %} </small>

      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="{% translate 'Close' %}"></button>
    </div>

    <div class="toast-body">{% translate "The requested operation is being processed." %}</div>
  </div>
</div>

<!-- =========================================================
     BUTTONS
========================================================= -->

<div class="eenos-section-title">
  {% translate "Buttons" %}
</div>

<div class="eenos-card mb-4">

  <div class="eenos-panel-title mb-2">
    {% translate "Button Styles" %}
  </div>

  <div class="eenos-panel-subtitle mb-4">
    {% translate "Common button styles used throughout Eenos." %}
  </div>


  <!-- =======================================================
       SOLID BUTTONS
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Solid Buttons" %}
    </div>

    <div class="d-flex flex-wrap gap-2">

      <button type="button" class="btn btn-primary">
        <i data-lucide="check"></i>
        {% translate "Primary" %}
      </button>

      <button type="button" class="btn btn-secondary">
        {% translate "Secondary" %}
      </button>

      <button type="button" class="btn btn-success">
        <i data-lucide="check-circle"></i>
        {% translate "Success" %}
      </button>

      <button type="button" class="btn btn-danger">
        <i data-lucide="trash-2"></i>
        {% translate "Danger" %}
      </button>

      <button type="button" class="btn btn-warning">
        <i data-lucide="triangle-alert"></i>
        {% translate "Warning" %}
      </button>

      <button type="button" class="btn btn-info">
        <i data-lucide="info"></i>
        {% translate "Info" %}
      </button>

      <button type="button" class="btn btn-light">
        {% translate "Light" %}
      </button>

      <button type="button" class="btn btn-dark">
        {% translate "Dark" %}
      </button>

    </div>

  </div>


  <!-- =======================================================
       OUTLINE BUTTONS
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Outline Buttons" %}
    </div>

    <div class="d-flex flex-wrap gap-2">

      <button type="button" class="btn btn-outline-primary">
        {% translate "Primary" %}
      </button>

      <button type="button" class="btn btn-outline-secondary">
        {% translate "Secondary" %}
      </button>

      <button type="button" class="btn btn-outline-success">
        {% translate "Success" %}
      </button>

      <button type="button" class="btn btn-outline-danger">
        {% translate "Danger" %}
      </button>

      <button type="button" class="btn btn-outline-warning">
        {% translate "Warning" %}
      </button>

      <button type="button" class="btn btn-outline-info">
        {% translate "Info" %}
      </button>

      <button type="button" class="btn btn-outline-dark">
        {% translate "Dark" %}
      </button>

    </div>

  </div>


  <!-- =======================================================
       BUTTON SIZES
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Button Sizes" %}
    </div>

    <div class="d-flex flex-wrap align-items-center gap-2">

      <button type="button" class="btn btn-primary btn-sm">
        {% translate "Small Button" %}
      </button>

      <button type="button" class="btn btn-primary">
        {% translate "Default Button" %}
      </button>

      <button type="button" class="btn btn-primary btn-lg">
        {% translate "Large Button" %}
      </button>

    </div>

  </div>


  <!-- =======================================================
       ICON BUTTONS
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Icon Buttons" %}
    </div>

    <div class="d-flex flex-wrap gap-2">

      <button
        type="button"
        class="btn btn-primary eenos-icon-button"
        title="{% translate 'Add' %}"
        aria-label="{% translate 'Add' %}"
      >
        <i data-lucide="plus"></i>
      </button>

      <button
        type="button"
        class="btn btn-secondary eenos-icon-button"
        title="{% translate 'Settings' %}"
        aria-label="{% translate 'Settings' %}"
      >
        <i data-lucide="settings"></i>
      </button>

      <button
        type="button"
        class="btn btn-success eenos-icon-button"
        title="{% translate 'Save' %}"
        aria-label="{% translate 'Save' %}"
      >
        <i data-lucide="save"></i>
      </button>

      <button
        type="button"
        class="btn btn-danger eenos-icon-button"
        title="{% translate 'Delete' %}"
        aria-label="{% translate 'Delete' %}"
      >
        <i data-lucide="trash-2"></i>
      </button>

      <button
        type="button"
        class="btn btn-outline-primary eenos-icon-button"
        title="{% translate 'Edit' %}"
        aria-label="{% translate 'Edit' %}"
      >
        <i data-lucide="pencil"></i>
      </button>

    </div>

  </div>


  <!-- =======================================================
       BUTTON GROUP
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Button Group" %}
    </div>

    <div class="btn-group" role="group">

      <button type="button" class="btn btn-outline-primary">
        {% translate "List" %}
      </button>

      <button type="button" class="btn btn-outline-primary">
        {% translate "Grid" %}
      </button>

      <button type="button" class="btn btn-outline-primary">
        {% translate "Details" %}
      </button>

    </div>

  </div>


  <!-- =======================================================
       DROPDOWN BUTTON
  ======================================================== -->

  <div class="mb-4">

    <div class="fw-semibold mb-2">
      {% translate "Dropdown Button" %}
    </div>

    <div class="dropdown">

      <button
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        <i data-lucide="plus"></i>
        {% translate "Actions" %}
      </button>

      <ul class="dropdown-menu">

        <li>
          <a class="dropdown-item" href="#">
            <i data-lucide="plus"></i>
            {% translate "Create Account" %}
          </a>
        </li>

        <li>
          <a class="dropdown-item" href="#">
            <i data-lucide="upload"></i>
            {% translate "Upload" %}
          </a>
        </li>

        <li>
          <a class="dropdown-item" href="#">
            <i data-lucide="download"></i>
            {% translate "Download" %}
          </a>
        </li>

        <li>
          <hr class="dropdown-divider">
        </li>

        <li>
          <a class="dropdown-item text-danger" href="#">
            <i data-lucide="trash-2"></i>
            {% translate "Delete" %}
          </a>
        </li>

      </ul>

    </div>

  </div>


  <!-- =======================================================
       DISABLED BUTTONS
  ======================================================== -->

  <div>

    <div class="fw-semibold mb-2">
      {% translate "Disabled Buttons" %}
    </div>

    <div class="d-flex flex-wrap gap-2">

      <button
        type="button"
        class="btn btn-primary"
        disabled
      >
        {% translate "Disabled Primary" %}
      </button>

      <button
        type="button"
        class="btn btn-outline-secondary"
        disabled
      >
        {% translate "Disabled Secondary" %}
      </button>

    </div>

  </div>

</div>


<!-- =========================================================
     CHECKBOXES / RADIO BUTTONS / SWITCHES
========================================================= -->

<div class="eenos-section-title">
  {% translate "Checkboxes, Radio Buttons & Switches" %}
</div>

<div class="row g-3 mb-4">

  <!-- =====================================================
       CHECKBOXES
  ====================================================== -->

  <div class="col-12 col-xl-4">

    <div class="eenos-card h-100">

      <div class="eenos-panel-title">
        {% translate "Checkboxes" %}
      </div>

      <div class="eenos-panel-subtitle mb-3">
        {% translate "Checkbox states and semantic colors." %}
      </div>


      <!-- Default -->

      <div class="form-check mb-2">

        <input
          class="form-check-input"
          type="checkbox"
          id="checkboxDefault"
        />

        <label class="form-check-label" for="checkboxDefault">
          {% translate "Default checkbox" %}
        </label>

      </div>


      <!-- Checked -->

      <div class="form-check mb-2">

        <input
          class="form-check-input"
          type="checkbox"
          id="checkboxChecked"
          checked
        />

        <label class="form-check-label" for="checkboxChecked">
          {% translate "Checked checkbox" %}
        </label>

      </div>


      <!-- Disabled -->

      <div class="form-check mb-3">

        <input
          class="form-check-input"
          type="checkbox"
          id="checkboxDisabled"
          disabled
        />

        <label class="form-check-label" for="checkboxDisabled">
          {% translate "Disabled checkbox" %}
        </label>

      </div>


      <!-- Semantic colors -->

      <div class="eenos-control-color-label">
        {% translate "Semantic Colors" %}
      </div>

      <div class="d-flex flex-column gap-2">

        <div class="form-check">
          <input
            class="form-check-input eenos-check-success"
            type="checkbox"
            id="checkboxSuccess"
            checked
          />
          <label class="form-check-label" for="checkboxSuccess">
            {% translate "Success" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-warning"
            type="checkbox"
            id="checkboxWarning"
            checked
          />
          <label class="form-check-label" for="checkboxWarning">
            {% translate "Warning" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-danger"
            type="checkbox"
            id="checkboxDanger"
            checked
          />
          <label class="form-check-label" for="checkboxDanger">
            {% translate "Danger" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-info"
            type="checkbox"
            id="checkboxInfo"
            checked
          />
          <label class="form-check-label" for="checkboxInfo">
            {% translate "Information" %}
          </label>
        </div>

      </div>

    </div>

  </div>


  <!-- =====================================================
       RADIO BUTTONS
  ====================================================== -->

  <div class="col-12 col-xl-4">

    <div class="eenos-card h-100">

      <div class="eenos-panel-title">
        {% translate "Radio Buttons" %}
      </div>

      <div class="eenos-panel-subtitle mb-3">
        {% translate "Single selection controls." %}
      </div>


      <!-- Default -->

      <div class="form-check mb-2">

        <input
          class="form-check-input"
          type="radio"
          name="sampleRadio"
          id="radioDefault"
        />

        <label class="form-check-label" for="radioDefault">
          {% translate "Default option" %}
        </label>

      </div>


      <!-- Checked -->

      <div class="form-check mb-2">

        <input
          class="form-check-input"
          type="radio"
          name="sampleRadio"
          id="radioChecked"
          checked
        />

        <label class="form-check-label" for="radioChecked">
          {% translate "Selected option" %}
        </label>

      </div>


      <!-- Disabled -->

      <div class="form-check mb-3">

        <input
          class="form-check-input"
          type="radio"
          name="sampleRadioDisabled"
          id="radioDisabled"
          disabled
        />

        <label class="form-check-label" for="radioDisabled">
          {% translate "Disabled option" %}
        </label>

      </div>


      <!-- Semantic colors -->

      <div class="eenos-control-color-label">
        {% translate "Semantic Colors" %}
      </div>

      <div class="d-flex flex-column gap-2">

        <div class="form-check">
          <input
            class="form-check-input eenos-check-success"
            type="radio"
            name="radioColors"
            id="radioSuccess"
            checked
          />
          <label class="form-check-label" for="radioSuccess">
            {% translate "Success" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-warning"
            type="radio"
            name="radioColors"
            id="radioWarning"
          />
          <label class="form-check-label" for="radioWarning">
            {% translate "Warning" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-danger"
            type="radio"
            name="radioColors"
            id="radioDanger"
          />
          <label class="form-check-label" for="radioDanger">
            {% translate "Danger" %}
          </label>
        </div>

        <div class="form-check">
          <input
            class="form-check-input eenos-check-info"
            type="radio"
            name="radioColors"
            id="radioInfo"
          />
          <label class="form-check-label" for="radioInfo">
            {% translate "Information" %}
          </label>
        </div>

      </div>

    </div>

  </div>


  <!-- =====================================================
       SWITCHES
  ====================================================== -->

  <div class="col-12 col-xl-4">

    <div class="eenos-card h-100">

      <div class="eenos-panel-title">
        {% translate "Switches" %}
      </div>

      <div class="eenos-panel-subtitle mb-3">
        {% translate "Toggle controls for enabling or disabling features." %}
      </div>


      <!-- Default -->

      <div class="form-check form-switch mb-3">

        <input
          class="form-check-input"
          type="checkbox"
          role="switch"
          id="switchDefault"
        />

        <label class="form-check-label" for="switchDefault">
          {% translate "Default switch" %}
        </label>

      </div>


      <!-- Checked -->

      <div class="form-check form-switch mb-3">

        <input
          class="form-check-input"
          type="checkbox"
          role="switch"
          id="switchChecked"
          checked
        />

        <label class="form-check-label" for="switchChecked">
          {% translate "Enabled switch" %}
        </label>

      </div>


      <!-- Disabled -->

      <div class="form-check form-switch mb-3">

        <input
          class="form-check-input"
          type="checkbox"
          role="switch"
          id="switchDisabled"
          disabled
        />

        <label class="form-check-label" for="switchDisabled">
          {% translate "Disabled switch" %}
        </label>

      </div>


      <!-- Semantic colors -->

      <div class="eenos-control-color-label mb-2">
        {% translate "Semantic Colors" %}
      </div>

      <div class="d-flex flex-column gap-3">

        <div class="form-check form-switch">
          <input
            class="form-check-input eenos-switch-success"
            type="checkbox"
            role="switch"
            id="switchSuccess"
            checked
          />
          <label class="form-check-label" for="switchSuccess">
            {% translate "Success" %}
          </label>
        </div>

        <div class="form-check form-switch">
          <input
            class="form-check-input eenos-switch-warning"
            type="checkbox"
            role="switch"
            id="switchWarning"
            checked
          />
          <label class="form-check-label" for="switchWarning">
            {% translate "Warning" %}
          </label>
        </div>

        <div class="form-check form-switch">
          <input
            class="form-check-input eenos-switch-danger"
            type="checkbox"
            role="switch"
            id="switchDanger"
            checked
          />
          <label class="form-check-label" for="switchDanger">
            {% translate "Danger" %}
          </label>
        </div>

        <div class="form-check form-switch">
          <input
            class="form-check-input eenos-switch-info"
            type="checkbox"
            role="switch"
            id="switchInfo"
            checked
          />
          <label class="form-check-label" for="switchInfo">
            {% translate "Information" %}
          </label>
        </div>

      </div>

    </div>

  </div>

</div>
{% endblock %}

{% block extra_js %} 
<!-- Local JS  -->
{% endblock %}