{% extends 'base.html' %}

{% block title %}{{ submission.tracking_id }} | 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 active">{{ submission.tracking_id }}</li>
            </ol>
        </nav>
        <div class="d-flex align-items-center">
            <h1 class="h3 mb-0 me-3">{{ submission.tracking_id }}</h1>
            {% set status_colors = {
                'pending': 'warning',
                'in_review': 'info',
                'revision_requested': 'secondary',
                'accepted': 'success',
                'published': 'primary',
                'rejected': 'danger'
            } %}
            <span class="badge bg-{{ status_colors.get(submission.status, 'secondary') }} fs-6">
                {{ submission.status|replace('_', ' ')|title }}
            </span>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <!-- Submission Details -->
                <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>Submission Details</h5>
                    </div>
                    <div class="card-body">
                        <h4 class="mb-3">{{ submission.title }}</h4>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <p class="mb-1 text-muted"><strong>Author:</strong></p>
                                <p>{{ submission.authors }}</p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1 text-muted"><strong>Email:</strong></p>
                                <p><a href="mailto:{{ submission.contact_email }}">{{ submission.contact_email }}</a></p>
                            </div>
                            {% if submission.affiliation %}
                            <div class="col-12">
                                <p class="mb-1 text-muted"><strong>Affiliation:</strong></p>
                                <p>{{ submission.affiliation }}</p>
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="mb-4">
                            <p class="mb-1 text-muted"><strong>Abstract:</strong></p>
                            <p class="lead">{{ submission.abstract }}</p>
                        </div>
                        
                        {% if submission.keywords %}
                        <div class="mb-4">
                            <p class="mb-1 text-muted"><strong>Keywords:</strong></p>
                            <p>
                                {% for keyword in submission.keywords.split(',') %}
                                <span class="badge bg-primary-subtle text-primary me-1">{{ keyword|trim }}</span>
                                {% endfor %}
                            </p>
                        </div>
                        {% endif %}
                        
                        <div class="row">
                            <div class="col-md-4">
                                <p class="mb-1 text-muted"><strong>Journal:</strong></p>
                                <p>{{ submission.journal.name if submission.journal else 'Not specified' }}</p>
                            </div>
                            <div class="col-md-4">
                                <p class="mb-1 text-muted"><strong>Article Type:</strong></p>
                                <p>{{ submission.article_type|replace('_', ' ')|title if submission.article_type else 'Not specified' }}</p>
                            </div>
                            <div class="col-md-4">
                                <p class="mb-1 text-muted"><strong>Submitted:</strong></p>
                                <p>{{ submission.created_at.strftime('%B %d, %Y at %H:%M') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Manuscript -->
                {% if submission.file_path %}
                <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>Manuscript</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between p-3 bg-light rounded">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-file-pdf text-danger fs-2 me-3"></i>
                                <div>
                                    <p class="mb-0 fw-medium">{{ submission.file_path }}</p>
                                    <small class="text-muted">Uploaded manuscript</small>
                                </div>
                            </div>
                            <a href="{{ url_for('main.uploaded_file', filename= submission.file_path) }}" 
                               class="btn btn-primary" target="_blank">
                                <i class="fas fa-download me-2"></i>Download
                            </a>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Status History -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-history me-2"></i>Status History</h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            {% for update in submission.status_updates.all() %}
                            <div class="timeline-item mb-3 pb-3 border-bottom">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="badge bg-{{ status_colors.get(update.status, 'secondary') }} me-2">
                                            {{ update.status|replace('_', ' ')|title }}
                                        </span>
                                        {% if update.updated_by %}
                                        <small class="text-muted">by {{ update.updated_by.name or update.updated_by.email }}</small>
                                        {% endif %}
                                    </div>
                                    <small class="text-muted">{{ update.created_at.strftime('%b %d, %Y %H:%M') }}</small>
                                </div>
                                {% if update.notes %}
                                <p class="mt-2 mb-0 text-muted">{{ update.notes }}</p>
                                {% endif %}
                            </div>
                            {% else %}
                            <div class="timeline-item">
                                <div class="d-flex justify-content-between align-items-start">
                                    <span class="badge bg-secondary">Submitted</span>
                                    <small class="text-muted">{{ submission.created_at.strftime('%b %d, %Y %H:%M') }}</small>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- Update Status -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Update Status</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ url_for('editor.submission_update', id=submission.id) }}" method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <div class="mb-3">
                                <label for="status" class="form-label">New Status</label>
                                <select class="form-select" id="status" name="status" required>
                                    <option value="pending" {{ 'selected' if submission.status == 'pending' }}>Pending</option>
                                    <option value="in_review" {{ 'selected' if submission.status == 'in_review' }}>In Review</option>
                                    <option value="revision_requested" {{ 'selected' if submission.status == 'revision_requested' }}>Revision Requested</option>
                                    <option value="accepted" {{ 'selected' if submission.status == 'accepted' }}>Accepted</option>
                                    <option value="rejected" {{ 'selected' if submission.status == 'rejected' }}>Rejected</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="notes" class="form-label">Notes</label>
                                <textarea class="form-control" id="notes" name="notes" rows="4"
                                          placeholder="Add any notes about this status update..."></textarea>
                                <div class="form-text">These notes will be visible in the status history</div>
                            </div>
                            
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" id="notify_author" name="notify_author" checked>
                                <label class="form-check-label" for="notify_author">Notify author by email</label>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-save me-2"></i>Update Status
                            </button>
                        </form>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="mailto:{{ submission.contact_email }}" class="btn btn-outline-primary">
                                <i class="fas fa-envelope me-2"></i>Email Author
                            </a>
                            {% if submission.status == 'accepted' %}
                            <a href="{{ url_for('editor.submission_convert', id=submission.id) }}" class="btn btn-success">
                                <i class="fas fa-newspaper me-2"></i>Convert to Article
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- Submission Info -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Information</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <th class="text-muted">Tracking ID</th>
                                <td><code>{{ submission.tracking_id }}</code></td>
                            </tr>
                            <tr>
                                <th class="text-muted">Submitted</th>
                                <td>{{ submission.created_at.strftime('%b %d, %Y') }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Last Updated</th>
                                <td>{{ submission.updated_at.strftime('%b %d, %Y') }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Journal</th>
                                <td>{{ submission.journal.abbreviation if submission.journal else '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}