{% extends "base.html" %}

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

{% block content %}
<section class="card">
  <h1 class="card__title">Create a new audiobook</h1>
  <form action="{{ url_for('web.enqueue_job') }}" method="post" enctype="multipart/form-data" class="grid grid--two">
    <div class="grid">
      <div class="field">
        <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" data-conditional="standard" data-role="voice-field">
        <label for="voice">Voice</label>
        <select id="voice" name="voice" data-role="voice-select">
          {% for voice in options.voices %}
          <option value="{{ voice }}">{{ voice }}</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" selected>Standard voice</option>
          <option value="__formula">Formula</option>
          {% if options.voice_profiles %}
          <optgroup label="Saved mixes">
            {% for name, data in options.voice_profiles %}
            <option value="{{ name }}">{{ name }} ({{ data.language|upper }})</option>
            {% endfor %}
          </optgroup>
          {% endif %}
        </select>
        <p class="tag">Manage mixes in the <a href="{{ url_for('web.voice_profiles_page') }}">voice mixer</a>.</p>
      </div>
      <div class="field" data-conditional="formula" data-role="formula-field" hidden>
        <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="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>
    <div class="grid">
      <div class="field">
        <label for="source_text">Or paste text directly</label>
        <textarea id="source_text" name="source_text" rows="12" placeholder="Drop some text here if you don't have a file handy..." data-role="source-text"></textarea>
      </div>
      <div class="text-preview" data-role="text-preview" aria-live="polite">
        <div class="text-preview__header">
          <h2>Preview</h2>
          <div class="text-preview__meta">
            <span data-role="char-count">0 characters</span>
            <span>·</span>
            <span data-role="word-count">0 words</span>
          </div>
        </div>
        <pre class="text-preview__body" data-role="preview-body">Paste text to see a live preview and character count.</pre>
      </div>
      <div class="field" style="justify-content: flex-end;">
        <button type="submit" class="button">Queue conversion</button>
      </div>
    </div>
  </form>
</section>
{% endblock %}

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