{% extends 'base.html' %}

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

<section class="section">
    <div class="container">
        <form action="{{ url_for('admin.edit_article', id=article.id) if article else url_for('admin.add_article') }}" 
              method="POST" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- Main Content -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0">Article Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <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="mb-3">
                                <label for="slug" class="form-label">URL Slug</label>
                                <div class="input-group">
                                    <span class="input-group-text">/articles/</span>
                                    <input type="text" class="form-control" id="slug" name="slug"
                                           value="{{ article.slug if article else '' }}"
                                           placeholder="auto-generated-from-title">
                                </div>
                                <div class="form-text">Leave blank to auto-generate</div>
                            </div>
                            
                            <div class="mb-3">
                                <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 Smith, Jane Doe, et al.">
                            </div>
                            
                            <div class="mb-3">
                                <label for="abstract" class="form-label">Abstract</label>
                                <textarea class="form-control" id="abstract" name="abstract" rows="5"
                                          placeholder="Enter the article abstract">{{ article.abstract if article else '' }}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="content" class="form-label">Full Content</label>
                                <textarea class="form-control" id="content" name="content" rows="15"
                                          placeholder="Enter the full article content (HTML supported)">{{ article.content if article else '' }}</textarea>
                                <div class="form-text">HTML formatting is supported</div>
                            </div>
                            
                            <div class="mb-3">
                                <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="keyword1, keyword2, keyword3">
                                <div class="form-text">Separate with commas</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SEO Section -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-search me-2"></i>SEO & Metadata</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="meta_title" class="form-label">Meta Title</label>
                                <input type="text" class="form-control" id="meta_title" name="meta_title"
                                       value="{{ article.meta_title if article else '' }}"
                                       placeholder="SEO title (leave blank to use article title)">
                            </div>
                            
                            <div class="mb-3">
                                <label for="meta_description" class="form-label">Meta Description</label>
                                <textarea class="form-control" id="meta_description" name="meta_description" rows="2"
                                          placeholder="SEO description for search engines">{{ article.meta_description if article else '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Publish Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0">Publish</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_published" name="is_published"
                                           {% if article and article.is_published %}checked{% endif %}>
                                    <label class="form-check-label" for="is_published">
                                        Published
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="published_date" class="form-label">Publish 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>
                            
                            <hr>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>{{ 'Update' if article else 'Create' }} Article
                                </button>
                                {% if article %}
                                <a href="{{ url_for('articles.preview_article', id=article.id) }}" 
                                   class="btn btn-outline-info" target="_blank">
                                    <i class="fas fa-eye me-2"></i>Preview Article
                                </a>
                                {% endif %}
                                <a href="{{ url_for('admin.articles') }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Journal & Tags -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0">Organization</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="journal_id" class="form-label">Journal</label>
                                <select class="form-select" id="journal_id" name="journal_id">
                                    <option value="">Select a journal</option>
                                    {% for journal in journals %}
                                    <option value="{{ journal.id }}" 
                                            {% if article and article.journal_id == journal.id %}selected{% endif %}>
                                        {{ journal.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">Tags</label>
                                <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
                                    {% for tag in tags %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="tag_{{ tag.id }}" name="tags" value="{{ tag.id }}"
                                               {% if article and tag in article.tags %}checked{% endif %}>
                                        <label class="form-check-label" for="tag_{{ tag.id }}">
                                            {{ tag.name }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Access & DOI -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0">Access & Identifiers</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_open_access" name="is_open_access"
                                           {% if article and article.is_open_access %}checked{% endif %}>
                                    <label class="form-check-label" for="is_open_access">
                                        <i class="fas fa-unlock-alt text-success me-1"></i>Open Access
                                    </label>
                                </div>
                            </div>
                            
                            <div class="mb-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="10.1234/example">
                                <div class="form-text">Leave blank to auto-generate</div>
                            </div>
                            
                            <div class="row g-2">
                                <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 '' }}">
                                </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 '' }}">
                                </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>
                    </div>
                    
                    <!-- File Upload -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0">PDF File</h5>
                        </div>
                        <div class="card-body">
                            {% if article and article.pdf_file %}
                            <div class="alert alert-info mb-3">
                                <i class="fas fa-file-pdf me-2"></i>
                                Current: {{ article.pdf_file }}
                            </div>
                            {% endif %}
                            <input type="file" class="form-control" id="pdf_file" name="pdf_file"
                                   accept=".pdf">
                            <div class="form-text">Upload PDF (max 16MB)</div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}