{% extends "base.html" %}

{% block title %}abogen · Dashboard{% endblock %}

{% block content %}
<section class="card card--workflow">
  <div class="step-indicator" aria-label="Audiobook workflow">
    <span class="step-indicator__item is-active">
      <span class="step-indicator__index">1</span>
      <span class="step-indicator__label">Upload &amp; settings</span>
    </span>
    <span class="step-indicator__item">
      <span class="step-indicator__index">2</span>
      <span class="step-indicator__label">Chapters</span>
    </span>
    <span class="step-indicator__item">
      <span class="step-indicator__index">3</span>
      <span class="step-indicator__label">Speakers</span>
    </span>
  </div>
  <h1 class="card__title">Create a New Audiobook</h1>
  <p class="card__subtitle">Kick off a fresh conversion with your manuscript or pasted text. You can fine-tune chapters and speakers in the next steps.</p>
  <div class="card__actions">
    <button type="button" class="button" data-role="open-upload-modal">Open upload &amp; settings</button>
  </div>
</section>

<div class="modal" data-role="upload-modal" hidden>
  <div class="modal__overlay" data-role="upload-modal-close" tabindex="-1"></div>
  <div class="modal__content card card--modal" role="dialog" aria-modal="true" aria-labelledby="upload-modal-title">
    <header class="modal__header">
      <div class="modal__heading">
        <p class="modal__eyebrow">Step 1 of 3</p>
        <h2 class="modal__title" id="upload-modal-title">Upload &amp; settings</h2>
        <p class="hint">Choose your source file or paste text, then set the defaults used for chapter analysis and speaker casting.</p>
      </div>
      <button type="button" class="icon-button" data-role="upload-modal-close" aria-label="Close upload settings">✕</button>
    </header>
    <form action="{{ url_for('web.enqueue_job') }}" method="post" enctype="multipart/form-data" class="upload-form">
      <div class="modal__body">
        <div class="grid grid--two form-grid">
          <div class="field field--file">
            <label for="source_file">Source File</label>
            <input type="file" id="source_file" name="source_file" accept=".txt,.pdf,.epub,.md,.markdown">
          </div>
          <div class="field">
            <label for="language">Language</label>
            <select id="language" name="language">
              {% for key, label in options.languages.items() %}
              <option value="{{ key }}">{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="voice_profile">Voice Profile</label>
            <select id="voice_profile" name="voice_profile" data-role="voice-profile">
              <option value="__standard" {% if not options.voice_profile_options %}selected{% endif %}>Standard Voice</option>
              <option value="__formula">Custom Voice Formula</option>
              {% if options.voice_profile_options %}
              <optgroup label="Saved mixes">
                {% for profile in options.voice_profile_options %}
                <option value="{{ profile.name }}" data-language="{{ profile.language }}" data-formula="{{ profile.formula|e }}" {% if loop.first %}selected{% endif %}>{{ profile.name }}{% if profile.language %} ({{ profile.language|upper }}){% endif %}</option>
                {% endfor %}
              </optgroup>
              {% endif %}
            </select>
          </div>
          <div class="field" data-role="voice-field" {% if options.voice_profile_options %}hidden aria-hidden="true"{% endif %}>
            <label for="voice">Voice</label>
            <select id="voice" name="voice" data-role="voice-select" data-default="{{ settings.default_voice }}">
              {% for voice in options.voices %}
              <option value="{{ voice }}" {% if settings.default_voice == voice %}selected{% endif %}>{{ voice }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field" data-conditional="formula" data-role="formula-field" hidden aria-hidden="true">
            <label for="voice_formula">Custom Voice Formula</label>
            <input type="text" id="voice_formula" name="voice_formula" placeholder="af_nova*0.4+am_liam*0.6" data-role="voice-formula">
          </div>
          <div class="field">
            <label for="speaker_config">Speaker preset</label>
            <select id="speaker_config" name="speaker_config">
              <option value="">None</option>
              {% for config in options.speaker_configs %}
              <option value="{{ config.name }}">{{ config.name }} · {{ config.speakers|length }} speaker{% if config.speakers|length != 1 %}s{% endif %}</option>
              {% endfor %}
            </select>
            <p class="hint">Optional: reuse a saved roster to keep character voices consistent.</p>
          </div>
          <div class="field">
            <label for="speed">Speed <span class="tag" id="speed_value">1.00×</span></label>
            <input type="range" id="speed" name="speed" min="0.6" max="1.4" step="0.05" value="1.0" oninput="document.getElementById('speed_value').textContent = Number.parseFloat(this.value).toFixed(2) + '×';">
          </div>
          <div class="field">
            <label for="subtitle_mode">Subtitle mode</label>
            <select id="subtitle_mode" name="subtitle_mode">
              <option value="Disabled">Disabled</option>
              <option value="Sentence">Sentence</option>
              <option value="Sentence + Comma">Sentence + Comma</option>
              <option value="Sentence + Highlighting">Sentence + Highlighting</option>
              {% for i in range(1, 11) %}
              <option value="{{ i }} {% if i == 1 %}word{% else %}words{% endif %}">{{ i }} {% if i == 1 %}word{% else %}words{% endif %}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="chunk_level">Chunk granularity</label>
            <select id="chunk_level" name="chunk_level">
              {% for option in options.chunk_levels %}
              <option value="{{ option.value }}" {% if settings.chunk_level == option.value %}selected{% endif %}>{{ option.label }}</option>
              {% endfor %}
            </select>
            <p class="hint">Controls how chapters are split into TTS-ready chunks.</p>
          </div>
          <div class="field">
            <label for="speaker_mode">Speaker mode</label>
            <select id="speaker_mode" name="speaker_mode">
              {% for option in options.speaker_modes %}
              <option value="{{ option.value }}" {% if settings.speaker_mode == option.value %}selected{% endif %}>{{ option.label }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="field">
            <label class="toggle-pill">
              <input type="checkbox" name="generate_epub3" value="true" {% if settings.generate_epub3 %}checked{% endif %}>
              <span>Generate EPUB 3 (experimental)</span>
            </label>
            <p class="hint">Creates a synchronized EPUB alongside audio output.</p>
          </div>
        </div>
      </div>
      <footer class="modal__footer">
        <button type="button" class="button button--ghost" data-role="upload-modal-close">Cancel</button>
        <button type="submit" class="button">Queue Conversion</button>
      </footer>
    </form>
  </div>
</div>

<div class="modal" data-role="reader-modal" hidden>
  <div class="modal__overlay" data-role="reader-modal-close" tabindex="-1"></div>
  <div class="modal__content card card--modal reader-modal" role="dialog" aria-modal="true" aria-labelledby="reader-modal-title">
    <header class="modal__header">
      <div class="modal__heading">
        <h2 class="modal__title" id="reader-modal-title">Read &amp; listen</h2>
        <p class="hint" data-role="reader-modal-hint">Preview synchronized narration directly in your browser.</p>
      </div>
      <button type="button" class="icon-button" data-role="reader-modal-close" aria-label="Close reader">✕</button>
    </header>
    <div class="modal__body reader-modal__body">
      <iframe title="EPUB reader"
              class="reader-modal__frame"
              data-role="reader-frame"
              allow="autoplay"
              loading="lazy"></iframe>
    </div>
  </div>
</div>

<section class="card" id="queue">
  <div id="jobs-panel"
       hx-get="{{ url_for('web.jobs_partial') }}"
       hx-trigger="load, every 3s"
       hx-target="#jobs-panel"
       hx-swap="innerHTML">
    {{ jobs_panel|safe }}
  </div>
</section>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script type="module" src="{{ url_for('static', filename='dashboard.js') }}"></script>
{% endblock %}