{% 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-owner">Propriétaire:</label><br>
        <input type="text" id="edit-owner" name="owner"><br>
        <label for="edit-status">État:</label><br>
        <select id="edit-status" name="status">
            <option value="0">À lire</option>
            <option value="1">En cours</option>
            <option value="2">Lu</option>
        </select>
        <label for="edit-category">Catégorie:</label><br>
        <select id="edit-category" name="category" onchange="categoryChange()">
            <option value="">- Pas de catégorie -</option>
            <option value="">- Nouvelle catégorie -</option>
            {% for category in categories %}
                {% if category != "" %}
                    <option value="{{ category }}">{{ category }}</option>
                {% endif %}
            {% endfor %}
        </select><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">
    <details>
        <summary>Ajouter manuellement</summary>
        <form action="/app/web-submit-isbn">
            <input type="text" name="isbn" placeholder="ISBN">
            <input type="submit" value="Ajouter">
        </form>
    </details>
</div>
<div id="table-container">
  <table id="books-table">
      <tr>
          <th>ISBN</th>
          <th>Titre</th>
          <th>Auteur</th>
          <th>État</th>
          <th>Propriétaire</th>
          <th>Catégorie</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.status == 0 %}class="red"{% elif book.status==2 %}class="green"{% endif %}>{{ book.status_text }}</p></td>
          <td><p {% if book.owner == None %}class="red"{% endif %}>{{ book.owner }}</p></td>
          <td><p {% if book.category == None %}class="red"{% endif %}>{{ book.category }}</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 %}