{% load static %}
<!-- ========== Left Sidebar Start ========== -->
<div class="leftside-menu">

  <!-- Brand Logo Light -->
  <a href="/" class="logo logo-light">
    <span class="logo-lg">
      <img src="{% static 'dashboard/images/logo.png' %}" alt="logo">
    </span>
    <span class="logo-sm">
      <img src="{% static 'dashboard/images/logo-sm.png' %}" alt="small logo">
    </span>
  </a>

  <!-- Brand Logo Dark -->
  <a href="/" class="logo logo-dark">
    <span class="logo-lg">
      <img src="{% static 'dashboard/images/logo-dark.png' %}" alt="dark logo">
    </span>
    <span class="logo-sm">
      <img src="{% static 'dashboard/images/logo-sm.png' %}" alt="small logo">
    </span>
  </a>

  <!-- Sidebar Hover Menu Toggle Button -->
  <div class="button-sm-hover" data-bs-toggle="tooltip" data-bs-placement="right" title="Show Full Sidebar">
    <i class="ri-checkbox-blank-circle-line align-middle"></i>
  </div>

  <!-- Full Sidebar Menu Close Button -->
  <div class="button-close-fullsidebar">
    <i class="ri-close-fill align-middle"></i>
  </div>

  <!-- Sidebar -left -->
  <div class="h-100" id="leftside-menu-container" data-simplebar>
    <!-- Leftbar User -->
    <div class="leftbar-user p-3 text-white">
      <a href="{% url 'custom:profile' %}" class="d-flex align-items-center text-reset">
          <div class="flex-shrink-0">
              <img src="{% static 'dashboard/images/users/avatar-1.jpg' %}" alt="user-image" height="42" class="rounded-circle shadow">
          </div>
          <div class="flex-grow-1 ms-2">
              <span class="fw-semibold fs-15 d-block">Cucha Hernández</span>
              <span class="fs-13">Founder</span>
          </div>
          <div class="ms-auto">
              <i class="ri-arrow-right-s-fill fs-20"></i>
          </div>
      </a>
  </div>

  {% load sidebar_menu %}
  <ul class="side-nav">
  {% render_sidebar_menu sidebar_menu %}
</ul>

    <!--- Sidemenu -->
    <ul class="side-nav">

      <li class="side-nav-title mt-1"> Main</li>

      <li class="side-nav-item">
        <a href="{% url 'index' %}" class="side-nav-link">
          <i class="ri-dashboard-2-fill"></i>
          <span class="badge bg-success float-end">9+</span>
          <span> Dashboard </span>
        </a>
      </li>

      <li class="side-nav-item">
        <a href="{% url 'apps:calendar' %}" class="side-nav-link">
          <i class="ri-calendar-2-fill"></i>
          <span> Calendar </span>
        </a>
      </li>


      <li class="side-nav-item">
        <a href="{% url 'apps:chat' %}" class="side-nav-link">
          <i class="ri-chat-voice-fill"></i>
          <span> Chat </span>
        </a>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail"
          class="side-nav-link">
          <i class="ri-mail-fill"></i>
          <span> Email </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarEmail">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'apps:email-inbox' %}">Inbox</a>
            </li>
            <li>
              <a href="{% url 'apps:email-read' %}">Read Email</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarTasks" aria-expanded="false" aria-controls="sidebarTasks"
          class="side-nav-link">
          <i class="ri-list-check-3"></i>
          <span> Tasks </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarTasks">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'apps:tasks' %}">List</a>
            </li>
            <li>
              <a href="{% url 'apps:tasks-details' %}">Details</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a href="{% url 'apps:kanban' %}" class="side-nav-link">
          <i class="ri-clipboard-fill"></i>
          <span> Kanban Board </span>
        </a>
      </li>

      <li class="side-nav-item">
        <a href="{% url 'apps:file-manager' %}" class="side-nav-link">
          <i class="ri-folder-4-fill"></i>
            <span class="badge bg-purple float-end">1 File</span>
            <span> File Manager </span>
        </a>
    </li>

      <li class="side-nav-title">Custom</li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages"
          class="side-nav-link">
          <i class="ri-pages-fill"></i>
          <span> Pages </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarPages">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'custom:profile' %}">Profile</a>
            </li>
            <li>
              <a href="{% url 'custom:invoice' %}">Invoice</a>
            </li>
            <li>
              <a href="{% url 'custom:faq' %}">FAQ</a>
            </li>
            <li>
              <a href="{% url 'custom:pricing' %}">Pricing</a>
            </li>
            <li>
              <a href="{% url 'custom:maintenance' %}">Maintenance</a>
            </li>
            <li>
              <a href="{% url 'custom:starter' %}">Starter Page</a>
            </li>
            <li>
              <a href="{% url 'custom:preloader' %}">With Preloader</a>
            </li>
            <li>
              <a href="{% url 'custom:timeline' %}">Timeline</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth"
          class="side-nav-link">
          <i class="ri-group-2-fill"></i>
          <span> Auth Pages </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarPagesAuth">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'custom:login' %}">Login</a>
            </li>
            <li>
              <a href="{% url 'custom:login-2' %}">Login 2</a>
            </li>
            <li>
              <a href="{% url 'custom:register' %}">Register</a>
            </li>
            <li>
              <a href="{% url 'custom:register-2' %}">Register 2</a>
            </li>
            <li>
              <a href="{% url 'custom:logout' %}">Logout</a>
            </li>
            <li>
              <a href="{% url 'custom:logout-2' %}">Logout 2</a>
            </li>
            <li>
              <a href="{% url 'custom:recoverpw' %}">Recover Password</a>
            </li>
            <li>
              <a href="{% url 'custom:recoverpw-2' %}">Recover Password 2</a>
            </li>
            <li>
              <a href="{% url 'custom:lock-screen' %}">Lock Screen</a>
            </li>
            <li>
              <a href="{% url 'custom:lock-screen-2' %}">Lock Screen 2</a>
            </li>
            <li>
              <a href="{% url 'custom:confirm-mail' %}">Confirm Mail</a>
            </li>
            <li>
              <a href="{% url 'custom:confirm-mail-2' %}">Confirm Mail 2</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarPagesError" aria-expanded="false" aria-controls="sidebarPagesError"
          class="side-nav-link">
          <i class="ri-error-warning-fill"></i>
          <span> Error Pages </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarPagesError">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'custom:error-404' %}">Error 404</a>
            </li>
            <li>
              <a href="{% url 'custom:error-404-alt' %}">Error 404-alt</a>
            </li>
            <li>
              <a href="{% url 'custom:error-500' %}">Error 500</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts"
          class="side-nav-link">
          <i class="ri-layout-3-fill"></i>
          <span> Layouts </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarLayouts">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'layouts:horizontal' %}" target="_blank">Horizontal</a>
            </li>
            <li>
              <a href="{% url 'layouts:detached' %}" target="_blank">Detached</a>
            </li>
            <li>
              <a href="{% url 'layouts:full' %}" target="_blank">Full View</a>
            </li>
            <li>
              <a href="{% url 'layouts:fullscreen' %}" target="_blank">Fullscreen View</a>
            </li>
            <li>
              <a href="{% url 'layouts:hover' %}" target="_blank">Hover Menu</a>
            </li>
            <li>
              <a href="{% url 'layouts:compact' %}" target="_blank">Compact</a>
            </li>
            <li>
              <a href="{% url 'layouts:icon-view' %}" target="_blank">Icon View</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-title">Components</li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI"
          class="side-nav-link">
          <i class="ri-suitcase-fill"></i>
          <span> Base UI </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarBaseUI">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:accordions' %}">Accordions</a>
            </li>
            <li>
              <a href="{% url 'components:alerts' %}">Alerts</a>
            </li>
            <li>
              <a href="{% url 'components:avatars' %}">Avatars</a>
            </li>
            <li>
              <a href="{% url 'components:badges' %}">Badges</a>
            </li>
            <li>
              <a href="{% url 'components:breadcrumb' %}">Breadcrumb</a>
            </li>
            <li>
              <a href="{% url 'components:buttons' %}">Buttons</a>
            </li>
            <li>
              <a href="{% url 'components:cards' %}">Cards</a>
            </li>
            <li>
              <a href="{% url 'components:carousel' %}">Carousel</a>
            </li>
            <li>
              <a href="{% url 'components:collapse' %}">Collapse</a>
            </li>
            <li>
              <a href="{% url 'components:dropdowns' %}">Dropdowns</a>
            </li>
            <li>
              <a href="{% url 'components:embed-video' %}">Embed Video</a>
            </li>
            <li>
              <a href="{% url 'components:grid' %}">Grid</a>
            </li>
            <li>
              <a href="{% url 'components:links' %}">Links</a>
            </li>
            <li>
              <a href="{% url 'components:list-group' %}">List Group</a>
            </li>
            <li>
              <a href="{% url 'components:modals' %}">Modals</a>
            </li>
            <li>
              <a href="{% url 'components:notifications' %}">Notifications</a>
            </li>
            <li>
              <a href="{% url 'components:offcanvas' %}">Offcanvas</a>
            </li>
            <li>
              <a href="{% url 'components:placeholders' %}">Placeholders</a>
            </li>
            <li>
              <a href="{% url 'components:pagination' %}">Pagination</a>
            </li>
            <li>
              <a href="{% url 'components:popovers' %}">Popovers</a>
            </li>
            <li>
              <a href="{% url 'components:progress' %}">Progress</a>
            </li>
            <li>
              <a href="{% url 'components:spinners' %}">Spinners</a>
            </li>
            <li>
              <a href="{% url 'components:tabs' %}">Tabs</a>
            </li>
            <li>
              <a href="{% url 'components:tooltips' %}">Tooltips</a>
            </li>
            <li>
              <a href="{% url 'components:typography' %}">Typography</a>
            </li>
            <li>
              <a href="{% url 'components:utilities' %}">Utilities</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarExtendedUI" aria-expanded="false" aria-controls="sidebarExtendedUI"
          class="side-nav-link">
          <i class="ri-paint-brush-fill"></i>
          <span> Extended UI </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarExtendedUI">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:extended-dragula' %}">Dragula</a>
            </li>
            <li>
              <a href="{% url 'components:extended-range-slider' %}">Range Slider</a>
            </li>
            <li>
              <a href="{% url 'components:extended-ratings' %}">Ratings</a>
            </li>
            <li>
              <a href="{% url 'components:extended-scrollbar' %}">Scrollbar</a>
            </li>
            <li>
              <a href="{% url 'components:extended-scrollspy' %}">Scrollspy</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a href="{% url 'components:widgets' %}" class="side-nav-link">
          <i class="ri-cup-fill"></i>
          <span> Widgets </span>
        </a>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons"
          class="side-nav-link">
          <i class="ri-copper-diamond-fill"></i>
          <span> Icons </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarIcons">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:icons-remixicons' %}">Remix Icons</a>
            </li>
            <li>
              <a href="{% url 'components:icons-bootstrap' %}">Bootstrap Icons</a>
            </li>
            <li>
              <a href="{% url 'components:icons-material' %}">Material Symbol Icons</a>
          </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts"
          class="side-nav-link">
          <i class="ri-bubble-chart-fill"></i>
          <span> Charts </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarCharts">
          <ul class="side-nav-second-level">
            <li class="side-nav-item">
              <a data-bs-toggle="collapse" href="#sidebarApexCharts" aria-expanded="false"
                aria-controls="sidebarApexCharts">
                <span> Apex Charts </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebarApexCharts">
                <ul class="side-nav-third-level">
                  <li>
                    <a href="{% url 'components:apex-area' %}">Area</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-bar' %}">Bar</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-bubble' %}">Bubble</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-candlestick' %}">Candlestick</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-column' %}">Column</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-heatmap' %}">Heatmap</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-line' %}">Line</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-mixed' %}">Mixed</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-timeline' %}">Timeline</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-boxplot' %}">Boxplot</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-treemap' %}">Treemap</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-pie' %}">Pie</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-radar' %}">Radar</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-radialbar' %}">RadialBar</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-scatter' %}">Scatter</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-polar-area' %}">Polar Area</a>
                  </li>
                  <li>
                    <a href="{% url 'components:apex-sparklines' %}">Sparklines</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="side-nav-item">
              <a data-bs-toggle="collapse" href="#sidebarChartJSCharts" aria-expanded="false"
                aria-controls="sidebarChartJSCharts">
                <span> ChartJS </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebarChartJSCharts">
                <ul class="side-nav-third-level">
                  <li>
                    <a href="{% url 'components:chartjs-area' %}">Area</a>
                  </li>
                  <li>
                    <a href="{% url 'components:chartjs-bar' %}">Bar</a>
                  </li>
                  <li>
                    <a href="{% url 'components:chartjs-line' %}">Line</a>
                  </li>
                  <li>
                    <a href="{% url 'components:chartjs-other' %}">Other</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms"
          class="side-nav-link">
          <i class="ri-survey-fill"></i>
          <span> Forms </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarForms">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:form-elements' %}">Basic Elements</a>
            </li>
            <li>
              <a href="{% url 'components:form-advanced' %}">Form Advanced</a>
            </li>
            <li>
              <a href="{% url 'components:form-validation' %}">Validation</a>
            </li>
            <li>
              <a href="{% url 'components:form-wizard' %}">Wizard</a>
            </li>
            <li>
              <a href="{% url 'components:form-fileuploads' %}">File Uploads</a>
            </li>
            <li>
              <a href="{% url 'components:form-editors' %}">Editors</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables"
          class="side-nav-link">
          <i class="ri-table-fill"></i>
          <span> Tables </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarTables">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:tables-basic' %}">Basic Tables</a>
            </li>
            <li>
              <a href="{% url 'components:tables-datatable' %}">Data Tables</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps"
          class="side-nav-link">
          <i class="ri-map-2-fill"></i>
          <span> Maps </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarMaps">
          <ul class="side-nav-second-level">
            <li>
              <a href="{% url 'components:google-map' %}">Google Maps</a>
            </li>
            <li>
              <a href="{% url 'components:vector-map' %}">Vector Maps</a>
            </li>
          </ul>
        </div>
      </li>

      <li class="side-nav-item">
        <a data-bs-toggle="collapse" href="#sidebarMultiLevel" aria-expanded="false" aria-controls="sidebarMultiLevel"
          class="side-nav-link">
          <i class="ri-share-fill"></i>
          <span> Multi Level </span>
          <span class="menu-arrow"></span>
        </a>
        <div class="collapse" id="sidebarMultiLevel">
          <ul class="side-nav-second-level">
            <li class="side-nav-item">
              <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false"
                aria-controls="sidebarSecondLevel">
                <span> Second Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebarSecondLevel">
                <ul class="side-nav-third-level">
                  <li>
                    <a href="javascript: void(0);">Item 1</a>
                  </li>
                  <li>
                    <a href="javascript: void(0);">Item 2</a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="side-nav-item">
              <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false"
                aria-controls="sidebarThirdLevel">
                <span> Third Level </span>
                <span class="menu-arrow"></span>
              </a>
              <div class="collapse" id="sidebarThirdLevel">
                <ul class="side-nav-third-level">
                  <li>
                    <a href="javascript: void(0);">Item 1</a>
                  </li>
                  <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false"
                      aria-controls="sidebarFourthLevel">
                      <span> Item 2 </span>
                      <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarFourthLevel">
                      <ul class="side-nav-forth-level">
                        <li>
                          <a href="javascript: void(0);">Item 2.1</a>
                        </li>
                        <li>
                          <a href="javascript: void(0);">Item 2.2</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!--- End Sidemenu -->

    <div class="clearfix"></div>
  </div>
</div>
<!-- ========== Left Sidebar End ========== -->