{% extends "base.html" %}

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

{% block content %}
<section class="card card--workflow">
  <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 entities in the next steps.</p>
  <div class="upload-card__dropzone" data-role="upload-dropzone" tabindex="0" role="button" aria-label="Open upload settings or drop a manuscript file">
    <div class="upload-card__dropzone-content">
      <span class="upload-card__icon" aria-hidden="true">&uarr;</span>
      <p class="upload-card__headline">Drop your manuscript to begin</p>
      <p class="upload-card__hint">Drag &amp; drop a supported file here, or click to choose one in the next step.</p>
      <p class="upload-card__filename" data-role="upload-dropzone-filename" hidden></p>
      <button type="button" class="button" data-role="open-upload-modal">Open upload &amp; settings</button>
    </div>
  </div>
</section>

{% with pending=None, readonly=False, active_step='settings' %}
  {% include "partials/upload_modal.html" %}
{% endwith %}

{% include "partials/reader_modal.html" %}

{% endblock %}

{% block scripts %}
  {{ super() }}
  <script id="voice-sample-texts" type="application/json">{{ options.sample_voice_texts | tojson }}</script>
  <script type="module" src="{{ url_for('static', filename='dashboard.js') }}"></script>
  <script type="module" src="{{ url_for('static', filename='prepare.js') }}"></script>
  <script type="module" src="{{ url_for('static', filename='speakers.js') }}"></script>
{% endblock %}