templates/admin/category/listSubcategories.html.twig line 1

Open in your IDE?
  1. {% extends 'admin/baseAdmin.html.twig' %}
  2. {% block page_title %}Sous category{% endblock %}
  3. {% block breadcump_main %}Catégorie{% endblock %}
  4. {% block breadcump_subtitle %}Liste des sous categories{% endblock %}
  5. {% block menu_left_sidebar %}
  6.     {% include 'include/menu/menuAdmin.html.twig' with { menu_active_event : '2'} %}
  7. {% endblock %}
  8. {% block stylesheets %}
  9.     <link href="{{ asset('admin/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
  10.     <link href="{{ asset('admin/css/tailwind.min.css') }}" rel="stylesheet" type="text/css">
  11.     <link href="{{ asset('admin/css/tailwind2.css') }}" rel="stylesheet" type="text/css">
  12. {% endblock %}
  13. {% block title %}{{"Liste des sous categories"|trans }}{% endblock %} 
  14. {% block content %}
  15.     <div class="container-fluid px-0">
  16.                 <div class="card dark:bg-zink-700 ">
  17.                     <div class="p-6">
  18.                         <div class="grid grid-cols-12">
  19.                             <div class="col-span-12">
  20.                                 <div class="md:flex justify-between space-y-2 md:space-y-0">
  21.                                     <div class="relative">
  22.                                         <i class="bx bx-search-alt text-16 text-zink-600  dark:text-zink-200 absolute top-3 left-4 right-4 transform w-1/12"></i>
  23.                                         <input class="border border-gray-400 focus:border focus:border-gray-400 focus:outline-none focus:ring-0 p-3 ps-5 pl-10 placeholder:text-[13px] placeholder:text-gray-600 py-2 rounded-full rtl:pr-10 text-gray-700 w-full" type="search" placeholder="Rechercher..." id="example-search-input">
  24.                                     </div>
  25.                                     <a href="{{ path('add_subcategory') }}"
  26.                                        class="mb-3 text-13 px-4 rounded-full text-white  bg-orange-500 border-transparent btn hover:bg-green-600" style="background: #ffaa00;"><i class="bx bx-plusme-1"></i>Ajouter nouvelle souscategorie</a>
  27.                                 </div>
  28.                                 <div class="my-6 overflow-x-auto">
  29.                                     <table class="table w-full datatable dt-responsive nowrap whitespace-nowrap border-spacing-y-1.5 border-collapse text-gray-800 ">
  30.                                         <thead>
  31.                                             <tr class="bg-gray-50 dark:bg-zink-50 dark:text-zink-200 ">
  32.                                                 <th class="p-3 font-semibold text-13 ltr:text-left rtl:text-right">#</th>
  33.                                                 <th class="p-3 font-semibold text-13 ltr:text-left rtl:text-right">Titre</th>
  34.                                                 <th class="p-3 font-semibold text-13 ltr:text-left rtl:text-right">Categorie</th>
  35.                                                 <th class="p-3 font-semibold text-13 ltr:text-left rtl:text-right">Description</th>
  36.                                                 <th class="p-3 font-semibold text-13 ltr:text-left rtl:text-right" style="width: 120px;">Action</th>
  37.                                             </tr>
  38.                                         </thead>
  39.                                         <tbody>
  40.                                             {% for subcategory in subcategories %}
  41.                                                 <tr class="bg-white border-b border-gray-300 dark:bg-transparent dark:border-zink-50">
  42.                                                     <td class="p-3">
  43.                                                         <div class="w-24 h-16 bg-gray-50 dark:bg-zink-50 rounded p-1">
  44.                                                             <img class="h-full" src="{{ asset(''~subcategory.image) }}" alt="">
  45.                                                         </div>
  46.                                                     </td>
  47.                                                     <th scope="row" class="p-3 text-13 ltr:text-left rtl:text-right font-normal  whitespace-nowrap text-gray-600 dark:text-zink-200">
  48.                                                         <p class="text-[14px] font-medium mb-1 text-gray-800 dark:text-white">{{ subcategory.name }}</p>
  49.                                                         <p></p>
  50.                                                     </th>
  51.                                                     <th scope="row" class="p-3 text-13 ltr:text-left rtl:text-right font-normal  whitespace-nowrap text-gray-600 dark:text-zink-200">
  52.                                                         <p>{{ subcategory.category.name }} </p>
  53.                                                     </th>
  54.                                                     <td class="p-3">
  55.                                                         <p>{{ subcategory.description }} </p>
  56.                                                     </td>
  57.                                                     <td class="p-3 ltr:text-left rtl:text-right">
  58.                                                         <div class="relative dropdown">
  59.                                                             <button class="p-0 text-gray-700 border-0 btn dropdown-toggle dark:text-zink-200 " type="button" data-bs-toggle="dropdown" id="dropdownMenuButton1">
  60.                                                                 <i class="bx bx-dots-horizontal font-medium text-15"></i>
  61.                                                             </button>
  62.                                                             <ul class="absolute right-0 left-auto top-auto z-20 hidden w-44 py-1.5 text-left list-none bg-white border border-transparent rounded shadow-lg dropdown-menu bg-clip-padding dark:bg-zink-700 dark:border-zink-50 dark:text-zink-200" aria-labelledby="dropdownMenuButton1">
  63.                                                                 <li><a class="bg-transparent dropdown-item font-normal flex items-center hover:bg-gray-50 px-6 py-1.5 text-13 text-gray-700 w-full whitespace-nowrap" href="{{ path('edit_subcategory', {'id':subcategory.id}) }}"><i class="bx bx-pencil text-16 text-green-500 me-2 "></i> Edit</a>
  64.                                                                 </li>
  65.                                                                 <li><a class="bg-transparent dropdown-item font-normal flex items-center hover:bg-gray-50 px-6 py-1.5 text-13 text-gray-700 w-full whitespace-nowrap" href="#"> <i class="bx bx-trash-alt text-16 text-red-500 me-2"></i>Remove</a>
  66.                                                                 </li>
  67.                                                             </ul>
  68.                                                         </div>
  69.                                                     </td>
  70.                                                 </tr>
  71.                                             {% endfor %}
  72.                                         </tbody>
  73.                                     </table>
  74.                                 </div>
  75.                                 <!-- end table -->
  76.                             </div>
  77.                             <div class="col-span-12">
  78.                                 <div class="flex justify-between items-center">
  79.                                     <p class="text-13">Showing 1 to 7 of 7 entries</p>
  80.                                     <ul class="flex space-x-4 rtl:space-x-reverse items-center">
  81.                                         <li class="cursor-pointer"><i class="bx bx-chevron-left text-gray-700 text-16 dark:text-zink-200 rtl:rotate-180 block"></i></li>
  82.                                         <li class="cursor-pointer flex h-8 items-center justify-center rounded-full text-white w-8" style="background: #ffaa00; ">1</li>
  83.                                         <li class="cursor-pointer"><i class="bx bx-chevron-right text-gray-700 text-16 dark:text-zink-200 rtl:rotate-180 block"></i></li>
  84.                                     </ul>
  85.                                 </div>
  86.                             </div>
  87.                         </div>
  88.                         <!-- end grid -->
  89.                     </div>
  90.                 </div>
  91.             </div>
  92.             <!-- container-fluid -->
  93. <!-- End main -->
  94. {% endblock %}
  95. {% block javascripts %}
  96.     <script src="{{ asset('admin/js/app.js')}}"></script>
  97. {% endblock %}