{% extends 'base.html' %}

{% block title %}Convert Submission | Editor | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('editor.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('editor.submissions') }}">Submissions</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('editor.view_submission', id=submission.id) }}">{{ submission.tracking_id }}</a></li>
                <li class="breadcrumb-item active">Convert to Article</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Convert Submission to Article</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <form action="{{ url_for('editor.submission_convert', id=submission.id) }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- Original Submission Info -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Original Submission</h5>
                        </div>
                        <div class="card-body bg-light">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Title:</strong></p>
                                    <p class="text-muted">{{ submission.title }}</p>
                                </div>
                                <div class="col-md-6">
                                    <p class="mb-1"><strong>Author:</strong></p>
                                    <p class="text-muted">{{ submission.authors }} ({{ submission.contact_email }})</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Article Details -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-newspaper me-2"></i>Article Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="title" name="title" required
                                           value="{{ submission.title }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="journal_id" class="form-label">Journal <span class="text-danger">*</span></label>
                                    <select class="form-select" id="journal_id" name="journal_id" required>
                                        <option value="">Select journal...</option>
                                        {% for journal in journals %}
                                        <option value="{{ journal.id }}" {{ 'selected' if submission.journal_id == journal.id }}>
                                            {{ journal.name }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="article_type" class="form-label">Article Type</label>
                                    <select class="form-select" id="article_type" name="article_type">
                                        <option value="research" {{ 'selected' if submission.article_type == 'research' }}>Research Article</option>
                                        <option value="review" {{ 'selected' if submission.article_type == 'review' }}>Review Article</option>
                                        <option value="case_study" {{ 'selected' if submission.article_type == 'case_study' }}>Case Study</option>
                                        <option value="commentary" {{ 'selected' if submission.article_type == 'commentary' }}>Commentary</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="authors" class="form-label">Authors <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="authors" name="authors" required
                                           value="{{ submission.authors }}">
                                </div>
                                <div class="col-12">
                                    <label for="abstract" class="form-label">Abstract <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="abstract" name="abstract" rows="5" required>{{ submission.abstract }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label for="keywords" class="form-label">Keywords</label>
                                    <input type="text" class="form-control" id="keywords" name="keywords"
                                           value="{{ submission.keywords or '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Content -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-file-code me-2"></i>Content</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="content" class="form-label">Article Content (HTML)</label>
                                <textarea class="form-control font-monospace" id="content" name="content" rows="15"></textarea>
                            </div>
                            
                            {% if submission.file_path %}
                            <div class="alert alert-info">
                                <i class="fas fa-file-pdf me-2"></i>
                                <a href="{{ url_for('main.uploaded_file', filename= submission.file_path) }}" target="_blank">
                                    Download original manuscript
                                </a>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Tags -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-tags me-2"></i>Tags</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-2">
                                {% for tag in tags %}
                                <div class="col-auto">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="tags" 
                                               value="{{ tag.id }}" id="tag_{{ tag.id }}">
                                        <label class="form-check-label" for="tag_{{ tag.id }}">{{ tag.name }}</label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Actions -->
                    <div class="card border-0 shadow-sm mb-4 sticky-top" style="top: 100px;">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <button type="submit" name="status" value="published" class="btn btn-success py-2">
                                    <i class="fas fa-globe me-2"></i>Create & Publish
                                </button>
                                <button type="submit" name="status" value="draft" class="btn btn-primary py-2">
                                    <i class="fas fa-save me-2"></i>Create as Draft
                                </button>
                                <a href="{{ url_for('editor.view_submission', id=submission.id) }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Publication Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Publication Settings</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="published_date" class="form-label">Publication Date</label>
                                <input type="date" class="form-control" id="published_date" name="published_date"
                                       value="{{ now().strftime('%Y-%m-%d') }}">
                            </div>
                            <div class="row g-3">
                                <div class="col-6">
                                    <label for="volume" class="form-label">Volume</label>
                                    <input type="text" class="form-control" id="volume" name="volume">
                                </div>
                                <div class="col-6">
                                    <label for="issue" class="form-label">Issue</label>
                                    <input type="text" class="form-control" id="issue" name="issue">
                                </div>
                            </div>
                            <div class="mt-3">
                                <label for="pages" class="form-label">Pages</label>
                                <input type="text" class="form-control" id="pages" name="pages">
                            </div>
                            <div class="form-check mt-3">
                                <input class="form-check-input" type="checkbox" id="is_open_access" name="is_open_access" checked>
                                <label class="form-check-label" for="is_open_access">Open Access</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured">
                                <label class="form-check-label" for="is_featured">Featured Article</label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Files -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-paperclip me-2"></i>Files</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="pdf_file" class="form-label">PDF Version</label>
                                <input type="file" class="form-control" id="pdf_file" name="pdf_file" accept=".pdf">
                            </div>
                            <div class="mb-0">
                                <label for="featured_image" class="form-label">Featured Image</label>
                                <input type="file" class="form-control" id="featured_image" name="featured_image" accept="image/*">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}