{% extends 'base.html.twig' %}

{% block title %}Les trésors de Luna - Index{% endblock %}

{% block stylesheets %}

  <link rel="stylesheet" href="{{asset('css/admin.style.css')}}">
  
{% endblock stylesheets %}
{% block body %}

<div class="container">

</div>

<div class="admin-actions container my-3 py-5 d-flex justify-content-center">

  <a class="btn btn-primary" href="{{path('admin_add_product')}}" style="display: flex; justify-content: center; align-items: center;">Ajouter Produit</a>

  <a class="btn btn-primary" href="{{path('admin_add_category')}}" style="display: flex; justify-content: center; align-items: center;">Catégories</a>
  
  <a class="btn btn-primary" href="{{path('app_logout')}}" style="display: flex; justify-content: center; align-items: center;">Se déconnecter</a>
  
</div>
  
<section id="products_list" class="container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Nom</th>
        <th scope="col">Prix</th>
        <th scope="col">Description</th>
        <th scope="col">Categorie</th>
        <th scope="col">Stock</th>
        <th scope="col">Aperçu</th>
        <th scope="col">Edition</th>
      </tr>
    </thead>
    <tbody>
      {% if productsForPagination %}
        
        {% for product in productsForPagination %}
        <tr>
          <td style="font-weight: bold">{{product.name}}</td>
          <td>{{product.price}} €</td>
          <td>{{product.shortDescription}}</td>
          <td>{{product.category}}</td>
          <td style="font-weight: bold; color: red;" >{{product.stock}}</td>
          <td><a href="{{path('admin_product', {'id': product.id})}}" style="text-decoration: underline">Voir</a></td>
          <td><a href="{{path('admin_edit_product', {'id': product.id})}}" style="text-decoration: underline">Editer</a></td>
        </tr>
        {% endfor %}


        {% else %}
        <div id="no_product_message" class="container d-flex justify-content-center align-items-center my-5">
          <p class="m-0 p-3">Pas de produits !</p>
        </div>
      {% endif %}

      
    </tbody>
  </table>  
</section>
<div class="pagination-control container" data-current-page="{{currentPage}}" data-number-of-pages="{{numberOfPages}}" data-selector-offset="{{selectorOffset}}">
  <div class="wrapper">

    <div class="control-wrapper">
      <div class="previous-selector selector">
        <iconify-icon icon="ic:baseline-keyboard-arrow-left" class="pagination-arrow fs-1"></iconify-icon>
  
      </div>
      <div class="first-page selector hide">1</div>
      <div class="pages-selectors-wrapper">
  
      </div>
      <div class="last-page selector hide">{{numberOfPages}}</div>
      <div class="next-selector selector">
        <iconify-icon icon="ic:baseline-keyboard-arrow-right" class="pagination-arrow fs-1"></iconify-icon>
      </div>
    </div>

  </div>

</div>

<hr class="container">
<section id="instagram-management" class="container">

  <h3>Liens instagram</h3>
  <h5>Copier/coller le code html fournis par instagram:</h5>
  <form action="{{path('admin_instagram_management')}}" method="POST">
    <p style="font-weight: bold;">Lien 1</p>
    <textarea name="link0" rows="4" placeholder="Lien 1">{{links[0]["link0"]}}</textarea>
    <p style="font-weight: bold;">Lien 2</p>
    <textarea name="link1" rows="4" placeholder="Lien 2">{{links[1]["link1"]}}</textarea>
    <p style="font-weight: bold;">Lien 3</p>
    <textarea name="link2" rows="4" placeholder="Lien 3">{{links[2]["link2"]}}</textarea>
    <p style="font-weight: bold;">Lien 4</p>
    <textarea name="link3" rows="4" placeholder="Lien 4">{{links[3]["link3"]}}</textarea>
    <p style="font-weight: bold;">Lien 5</p>
    <textarea name="link4" rows="4" placeholder="Lien 5">{{links[4]["link4"]}}</textarea>
    <button class="btn btn-primary" type="submit" >Enregistrer</button>
  </form>

</section>

<script type="module">
import AdminPagination from '/js/classes/AdminPagination.js'
window.addEventListener('load', () => {
  //Pagination
  const paginationControl = document.querySelector('.pagination-control')
  const Pagination = new AdminPagination(paginationControl)
  
})
</script>

{% block javascripts %}
  
{% endblock javascripts %}

{% endblock %}