{% extends layout_path %}

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

{% block title %}Tabler - Icons{% endblock title %}

{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-icons.css' %}" />
{% endblock page_css %}

{%block content %}
<p class="ms-3">You can check complete list of Tabler icons from <a href="https://tabler-icons.io/" target="_blank">https://tabler-icons.io/</a></p>

<!-- Icon container -->
<div class="d-flex flex-wrap" id="icons-container">
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-adobe mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">adobe</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-javascript mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">javascript</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-slack mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">slack</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-figma mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">figma</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-dribbble mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">dribbble</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-docker mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">docker</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-gitlab mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">gitlab</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-patreon mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">patreon</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-facebook mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">facebook</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-discord mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">discord</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-vue mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">vue</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-pinterest mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">pinterest-alt</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-codepen mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">codepen</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-airbnb mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">airbnb</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-amazon mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">amazon</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-android mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">android</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-angular mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">angular</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-apple mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">apple</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-linkedin mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">linkedIn</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-behance mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">behance</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-bing mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bing</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-currency-bitcoin mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bitcoin</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-tumblr mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">tumblr</p>
    </div>
  </div>
  <div class="card icon-card cursor-pointer text-center mb-6 mx-3">
    <div class="card-body">
      <i class="icon-base ti tabler-brand-bootstrap mb-2"></i>
      <p class="icon-name text-capitalize text-truncate mb-0">bootstrap</p>
    </div>
  </div>
</div>

<!-- Buttons -->
<div class="d-flex justify-content-center mx-auto gap-4">
  <a href="https://tabler-icons.io/" target="_blank" class="btn btn-primary">View All Icons</a>
  <a href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/Icons.html" class="btn btn-primary" target="_blank">How to use icons?</a>
</div>
{% endblock %}