{% extends 'base.html' %}

{% block title %}Liste des livres{% endblock %}

{% block header %}
<h1>Table des livres</h1>
{% endblock %}

{% block content %}
<script src="{{ url_for('static', filename='main.js') }}" defer></script>
<script src="{{ url_for('static', filename='dynamicUpdate.js') }}" defer></script>
<dialog id="edit-book-dialog">
    <form id="edit-book-form" action="/app/update-book" method="post">
        <input type="hidden" id="edit-isbn" value="" name="isbn">
        <label for="edit-title">Titre:</label><br>
        <input type="text" id="edit-title" name="title"><br>
        <label for="edit-author">Auteur:</label><br>
        <input type="text" id="edit-author" name="author"><br>
        <label for="edit-date">Date:</label><br>
        <input type="text" id="edit-date" name="publish_date"><br>
        <label for="edit-publisher">Éditeur:</label><br>
        <input type="text" id="edit-publisher" name="publisher"><br>
        <label for="edit-category">Catégorie:</label><br>
        <select id="edit-category" name="category">
            <option value="">- Pas de catégorie -</option>
            {% for category in categories %}
                {% if category != "" %}
                    <option value="{{ category }}">{{ category }}</option>
                {% endif %}
            {% endfor %}
        </select><br>
        <label for="edit-quantity">Quantité:</label><br>
        <input type="number" id="edit-quantity" name="count"><br>
        <input type="submit" value="Mettre à jour">
    </form>
    <button onclick="hideEditBookDialog()">Annuler</button>
</dialog>
<dialog id="delete-book-dialog">
    <p>Êtes-vous sûr de supprimer ce livre ?</p>
    <b id="delete-book-name">Nom du livre...</b>
    <form id="delete-book-form" action="/app/delete-book" method="post">
        <input type="hidden" id="delete-isbn" value="" name="isbn">
        <input type="submit" value="Oui">
    </form>
    <button id="cancel-delete">Annuler</button>
</dialog>
<div id="add-book">
    Ajouter manuellement
    <form action="/app/web-submit-isbn">
        <input type="text" name="isbn" placeholder="ISBN">
        <input type="submit" value="Ajouter">
    </form>
</div>
<div id="table-container">
  <table id="books-table">
      <tr>
          <th>ISBN</th>
          <th>Titre</th>
          <th>Auteur</th>
          <th>Date</th>
          <th>Éditeur</th>
          <th>Catégorie</th>
          <th>Quantité</th>
          <th>Actions</th>
      </tr>
      {% for book in books %}
      <tr>
          <td>{{ book.isbn }}</td>
          <td><p {% if book.title == None %}class="red"{% endif %}>{{ book.title }}</p></td>
          <td><p {% if book.author == None %}class="red"{% endif %}>{{ book.author }}</p></td>
          <td><p {% if book.publish_date == None %}class="red"{% endif %}>{{ book.publish_date }}</p></td>
          <td><p {% if book.publisher == None %}class="red"{% endif %}>{{ book.publisher }}</p></td>
          <td><p {% if book.category == None %}class="red"{% endif %}>{{ book.category }}</p></td>
          <td><p {% if book.count != 1 %}class="red"{% endif %}>{{ book.count }}</p></td>
          <td>
              <button class="action" onclick='openEditBookDialog("{{ book.isbn }}")'>✏️</button>
              <button class="action" onclick='openDeleteBookDialog("{{ book.isbn }}")'>🗑️</button>
          </td>
      </tr>
      {% endfor %}
  </table>
</div>
<br/>
<a href="/app/export-csv" download="books.csv">Exporter en CSV</a>
{% endblock %}