<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Éditeur de Livre</title>
  <link href="{{ url_for('static', filename='css/lib/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/lib/bootstrap-icons.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/lib/fontawesome.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/lib/codemirror.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/lib/monokai.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/lib/eclipse.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>

<body>


  <div class="container-fluid">
    <div class="row">
      <!-- Sidebar -->
      <div class="col-md-2 sidebar">
        <!-- Éléments cachés pour stocker les données -->
        <div id="characters-data" style="display: none;"></div>
        <div id="plots-data" style="display: none;"></div>

        <div class="word-count">
          <h5>Compteur de mots</h5>
          <p>Aujourd'hui : <span id="words-today">0</span> mots</p>
          <div class="progress">
            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
          </div>
          <p id="progress-text">0% de l'objectif</p>
          <div class="input-group mb-3">
            <span class="input-group-text">Objectif</span>
            <input type="number" class="form-control" id="word-goal" value="400">
          </div>
          <div class="progress-chart-container" style="height: 200px;">
            <canvas id="progressChart"></canvas>
          </div>
        </div>

        <div class="comment-section mb-3">
          <button id="add-comment-btn" class="btn btn-outline-primary w-100 mb-2">
            <i class="bi bi-chat-square-text"></i> Ajouter un commentaire
          </button>
          <div class="d-flex gap-2">
            <button id="move-up-btn" class="btn btn-outline-secondary flex-grow-1">
              <i class="bi bi-arrow-up"></i> Déplacer vers le haut
            </button>
            <button id="move-down-btn" class="btn btn-outline-secondary flex-grow-1">
              <i class="bi bi-arrow-down"></i> Déplacer vers le bas
            </button>
          </div>
        </div>

        <div class="navigation-section">
          <h5>Navigation</h5>
          <ul class="list-group">
            <li class="list-group-item">
              <a href="#" class="book-link" data-type="book">Livre</a>
            </li>
            <li class="list-group-item">
              <a href="#" class="characters-file-link" data-type="characters">Personnages</a>
            </li>
            <li class="list-group-item">
              <a href="#" class="plots-file-link" data-type="plots">Intrigues</a>
            </li>
          </ul>
        </div>

        <div class="characters-section">
          <h5>Personnages</h5>
          <div class="characters-toc"></div>
          <ul class="list-group">
            {% for character in characters %}
            <li class="list-group-item">
              <a href="#" class="character-link" data-type="character" data-name="{{ character.name }}">{{
                character.name }}</a>
            </li>
            {% endfor %}
          </ul>
        </div>

        <div class="plots-section">
          <h5>Intrigues</h5>
          <div class="plots-toc"></div>
        </div>

        <div class="table-of-contents">
          <h5>Table des matières</h5>
          <ul class="toc-list"></ul>
        </div>

        <div class="filters mb-3">
          <h5>Options</h5>
          <div class="theme-switch">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" id="theme-switch">
              <label class="form-check-label" for="theme-switch">Thème sombre</label>
            </div>
          </div>
          <h6>Prévisualisation</h6>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="auto-preview" checked>
            <label class="form-check-label" for="auto-preview">Mise à jour automatique</label>
          </div>
          <h5>Filtres</h5>

          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="show-titles" checked>
            <label class="form-check-label" for="show-titles">Montrer les titres avec le tag :titre:</label>
            <i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
              title="Affiche ou masque les titres qui contiennent :titre: ou :title: dans leur contenu"></i>
          </div>
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="show-regular-titles">
            <label class="form-check-label" for="show-regular-titles">Montrer les titres d'intrigue</label>
            <i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
              title="Affiche ou masque les titres qui ne contiennent pas :titre: ou :title: dans leur contenu"></i>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="show-comments">
            <label class="form-check-label" for="show-comments">Commentaires</label>
            <i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
              title="Affiche ou masque les commentaires (lignes commençant par # et blocs entre #+BEGIN_COMMENT et #+END_COMMENT)"></i>
          </div>
        </div>
      </div>

      <!-- Main content -->
      <div class="col-md-5 editor">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <h2>Éditeur de Livre</h2>
          <button id="update-btn" class="btn btn-primary">Mettre à jour</button>
        </div>
        <textarea id="editor-content">{{ content }}</textarea>
      </div>

      <!-- Preview panel -->
      <div class="col-md-5 preview-panel">
        <div id="preview-content" class="preview-content"></div>
      </div>
    </div>
  </div>

  <!-- Modal pour les personnages -->
  <div class="modal fade" id="characterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Personnage</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="character-name" class="form-label">Nom</label>
            <input type="text" class="form-control" id="character-name">
          </div>
          <div class="mb-3">
            <label for="character-content" class="form-label">Contenu</label>
            <textarea class="form-control" id="character-content" rows="10"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="button" class="btn btn-primary" id="save-character">Enregistrer</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal pour les intrigues -->
  <div class="modal fade" id="plotModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Intrigue</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="plot-name" class="form-label">Nom</label>
            <input type="text" class="form-control" id="plot-name">
          </div>
          <div class="mb-3">
            <label for="plot-content" class="form-label">Contenu</label>
            <textarea class="form-control" id="plot-content" rows="10"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
          <button type="button" class="btn btn-primary" id="save-plot">Enregistrer</button>
        </div>
      </div>
    </div>
  </div>

  <script src="{{ url_for('static', filename='js/lib/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/chart.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/codemirror.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/xml.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/javascript.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/css.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/markdown.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/commonlisp.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/lib/scheme.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/mode/org.js') }}"></script>
  <script>
    // Passer les données des personnages et des intrigues au JavaScript
    document.getElementById('characters-data').textContent = JSON.stringify({{ characters| tojson | safe }});
    document.getElementById('plots-data').textContent = JSON.stringify({{ plots| tojson | safe }});

    document.getElementById('update-btn').addEventListener('click', async () => {
      const content = document.getElementById('editor-content').value;
      const editorTitle = document.querySelector('.editor h2').textContent;
      try {
        const response = await fetch('/update', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: `content=${encodeURIComponent(content)}&editor_title=${encodeURIComponent(editorTitle)}`
        });
        if (response.ok) {
            console.info('Contenu mis à jour avec succès !');
        }
      } catch (error) {
        alert('Erreur lors de la mise à jour');
      }
    });
  </script>
  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>

</html>