{% extends 'base.html' %}

{% block title %}{{ 'Edit' if article else 'Create' }} Article | 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.articles') }}">Articles</a></li>
                <li class="breadcrumb-item active">{{ 'Edit' if article else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">{{ 'Edit' if article else 'Create' }} Article</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <form action="{{ url_for('editor.article_edit', id=article.id) if article else url_for('editor.article_create') }}" 
              method="POST" enctype="multipart/form-data" id="articleForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- Basic Info -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Basic Information</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="{{ article.title if article else '' }}"
                                           placeholder="Enter article title">
                                </div>
                                <div class="col-12">
                                    <label for="slug" class="form-label">URL Slug</label>
                                    <input type="text" class="form-control" id="slug" name="slug"
                                           value="{{ article.slug if article else '' }}"
                                           placeholder="auto-generated-from-title">
                                    <div class="form-text">Leave empty to auto-generate from title</div>
                                </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 article and article.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 article and article.article_type == 'research' }}>Research Article</option>
                                        <option value="review" {{ 'selected' if article and article.article_type == 'review' }}>Review Article</option>
                                        <option value="case_study" {{ 'selected' if article and article.article_type == 'case_study' }}>Case Study</option>
                                        <option value="commentary" {{ 'selected' if article and article.article_type == 'commentary' }}>Commentary</option>
                                        <option value="editorial" {{ 'selected' if article and article.article_type == 'editorial' }}>Editorial</option>
                                        <option value="letter" {{ 'selected' if article and article.article_type == 'letter' }}>Letter</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="{{ article.authors if article else '' }}"
                                           placeholder="John Doe, Jane Smith, Robert Johnson">
                                    <div class="form-text">Comma-separated list of authors</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Abstract & Keywords -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-align-left me-2"></i>Abstract & Keywords</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="abstract" class="form-label">Abstract <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="abstract" name="abstract" rows="6" required
                                          placeholder="Enter the article abstract...">{{ article.abstract if article else '' }}</textarea>
                                <div class="form-text d-flex justify-content-between">
                                    <span>Summarize the key points of the article</span>
                                    <span id="abstractCount">0 words</span>
                                </div>
                            </div>
                            <div class="mb-0">
                                <label for="keywords" class="form-label">Keywords</label>
                                <input type="text" class="form-control" id="keywords" name="keywords"
                                       value="{{ article.keywords if article else '' }}"
                                       placeholder="machine learning, neural networks, deep learning">
                                <div class="form-text">Comma-separated keywords for search indexing</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-alt 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="20"
                                          placeholder="<h2>Introduction</h2>
<p>Your content here...</p>

<h2>Methods</h2>
<p>...</p>

<h2>Results</h2>
<p>...</p>

<h2>Discussion</h2>
<p>...</p>

<h2>Conclusion</h2>
<p>...</p>

<h2>References</h2>
<ol>
  <li>Author A. Title. Journal. Year;</li>
</ol>">{{ article.content if article else '' }}</textarea>
                            </div>
                        </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">
                            {% if tags %}
                            <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 }}"
                                               {{ 'checked' if article and tag in article.tags }}>
                                        <label class="form-check-label" for="tag_{{ tag.id }}">{{ tag.name }}</label>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            {% else %}
                            <p class="text-muted mb-0">No tags available</p>
                            {% endif %}
                        </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>{{ 'Update' if article and article.status == 'published' else 'Publish' }}
                                </button>
                                <button type="submit" name="status" value="draft" class="btn btn-primary py-2">
                                    <i class="fas fa-save me-2"></i>Save as Draft
                                </button>
                                <a href="{{ url_for('editor.articles') }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Publication Details -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-book me-2"></i>Publication Details</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="{{ article.published_date.strftime('%Y-%m-%d') if article and article.published_date else '' }}">
                            </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"
                                           value="{{ article.volume if article else '' }}" placeholder="e.g., 15">
                                </div>
                                <div class="col-6">
                                    <label for="issue" class="form-label">Issue</label>
                                    <input type="text" class="form-control" id="issue" name="issue"
                                           value="{{ article.issue if article else '' }}" placeholder="e.g., 3">
                                </div>
                            </div>
                            <div class="mt-3">
                                <label for="pages" class="form-label">Pages</label>
                                <input type="text" class="form-control" id="pages" name="pages"
                                       value="{{ article.pages if article else '' }}" placeholder="e.g., 123-145">
                            </div>
                            <div class="mt-3">
                                <label for="doi" class="form-label">DOI</label>
                                <input type="text" class="form-control" id="doi" name="doi"
                                       value="{{ article.doi if article else '' }}" placeholder="Auto-generated">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Files -->
                    <div class="card border-0 shadow-sm mb-4">
                        <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="featured_image" class="form-label">Featured Image</label>
                                {% if article and article.featured_image %}
                                <div class="mb-2">
                                    <img src="{{ url_for('main.uploaded_file', filename= article.featured_image) }}" 
                                         alt="Current image" class="img-thumbnail" style="max-height: 100px;">
                                </div>
                                {% endif %}
                                <input type="file" class="form-control" id="featured_image" name="featured_image" accept="image/*">
                            </div>
                            <div class="mb-0">
                                <label for="pdf_file" class="form-label">PDF Version</label>
                                {% if article and article.pdf_file %}
                                <div class="mb-2">
                                    <a href="{{ url_for('main.uploaded_file', filename= article.pdf_file) }}" 
                                       target="_blank" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-file-pdf me-1"></i>Current PDF
                                    </a>
                                </div>
                                {% endif %}
                                <input type="file" class="form-control" id="pdf_file" name="pdf_file" accept=".pdf">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Options -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-cog me-2"></i>Options</h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="is_open_access" name="is_open_access"
                                       {{ 'checked' if (article and article.is_open_access) or not article }}>
                                <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"
                                       {{ 'checked' if article and article.is_featured }}>
                                <label class="form-check-label" for="is_featured">Featured Article</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
// Word counter for abstract
const abstractTextarea = document.getElementById('abstract');
const abstractCount = document.getElementById('abstractCount');

function updateWordCount() {
    const text = abstractTextarea.value.trim();
    const words = text ? text.split(/\s+/).length : 0;
    abstractCount.textContent = words + ' word' + (words !== 1 ? 's' : '');
}

abstractTextarea.addEventListener('input', updateWordCount);
updateWordCount();

// Auto-generate slug
document.getElementById('title').addEventListener('input', function() {
    const slugInput = document.getElementById('slug');
    if (!slugInput.value || !{{ 'true' if article else 'false' }}) {
        const slug = this.value.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
        slugInput.placeholder = slug || 'auto-generated-from-title';
    }
});
</script>
{% endblock %}