{% extends "base.html" %}

{% block title %}Bookish — Convertitore{% endblock %}

{% block content %}
<div class="convert-page">
    <h1>Converti ebook</h1>
    <p class="subtitle">Carica un file e scegli il formato di destinazione</p>

    <form id="convert-form" enctype="multipart/form-data">
        <!-- Drop zone -->
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-content">
                <span class="drop-icon">📖</span>
                <p>Trascina qui il tuo file</p>
                <p class="drop-hint">oppure clicca per selezionare</p>
            </div>
            <input type="file" name="file" id="fileInput" class="file-input" accept=".epub,.pdf,.docx,.md,.txt,.html,.fb2,.mobi,.latex,.tex">
        </div>

        <!-- File info -->
        <div class="file-info" id="fileInfo" style="display:none;">
            <span class="file-name" id="fileName"></span>
            <button type="button" class="btn-remove" id="removeFile" title="Rimuovi file">×</button>
        </div>

        <!-- Output format grid -->
        <div class="format-section" id="formatSection" style="display:none;">
            <label class="section-label">Converti in:</label>
            <div class="format-grid" id="formatGrid">
                {% for key, fmt in formats.items() %}
                <button type="button" class="format-btn" data-format="{{ key }}">
                    {{ fmt.label }}
                </button>
                {% endfor %}
            </div>
        </div>

        <!-- Convert button -->
        <button type="submit" class="btn-convert" id="convertBtn" disabled>
            🚀 Converti
        </button>
    </form>

    <!-- Progress -->
    <div class="progress-section" id="progressSection" style="display:none;">
        <div class="progress-bar-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <p class="progress-status" id="progressStatus">Avvio conversione...</p>
    </div>

    <!-- Result -->
    <div class="result-section" id="resultSection" style="display:none;">
        <div class="result-success">
            <span class="result-icon">✅</span>
            <p>Conversione completata!</p>
            <a href="#" class="btn-download" id="downloadLink">⬇ Scarica file</a>
            <button type="button" class="btn-read" id="readLink">📖 Leggi nel reader</button>
        </div>
    </div>

    <!-- Error -->
    <div class="error-section" id="errorSection" style="display:none;">
        <p class="error-message" id="errorMessage"></p>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
    /* epub.js supporta font-size iniettato via CSS, niente extra */
</style>
{% endblock %}