{% extends "admin/base.html" %}

{% block title %}View Contribution - GJEE Admin{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Contribution Details</h1>
    <a href="{{ url_for('admin_contributions') }}" class="btn btn-secondary">&larr; Back to Contributions</a>
</div>

<div class="contribution-details">
    <div class="detail-card">
        <h2>{{ contribution.title }}</h2>
        
        <div class="detail-row">
            <strong>Authors:</strong>
            <span>{{ contribution.authors }}</span>
        </div>
        
        <div class="detail-row">
            <strong>Contact Email:</strong>
            <span><a href="mailto:{{ contribution.email }}">{{ contribution.email }}</a></span>
        </div>
        
        <div class="detail-row">
            <strong>Submitted:</strong>
            <span>{{ contribution.submitted_at.strftime('%B %d, %Y at %H:%M') }}</span>
        </div>
        
        <div class="detail-row">
            <strong>Status:</strong>
            <span class="status-badge status-{{ contribution.status }}">{{ contribution.status|capitalize }}</span>
        </div>
        
        <div class="detail-row">
            <strong>File:</strong>
            <span>
                {{ contribution.original_filename }}
                <a href="{{ url_for('admin_download_contribution', contribution_id=contribution.id) }}" class="btn btn-sm btn-primary">Download</a>
            </span>
        </div>
        
        <div class="detail-section">
            <strong>Abstract:</strong>
            <div class="abstract-box">
                {{ contribution.abstract }}
            </div>
        </div>
        
        {% if contribution.notes %}
        <div class="detail-section">
            <strong>Admin Notes:</strong>
            <div class="notes-box">
                {{ contribution.notes }}
            </div>
        </div>
        {% endif %}
    </div>
    
    <div class="action-card">
        <h3>Update Status</h3>
        <form method="POST" action="{{ url_for('admin_update_contribution_status', contribution_id=contribution.id) }}">
            <div class="form-group">
                <label for="status">Status</label>
                <select id="status" name="status">
                    <option value="pending" {% if contribution.status == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="reviewed" {% if contribution.status == 'reviewed' %}selected{% endif %}>Reviewed</option>
                    <option value="accepted" {% if contribution.status == 'accepted' %}selected{% endif %}>Accepted</option>
                    <option value="rejected" {% if contribution.status == 'rejected' %}selected{% endif %}>Rejected</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="notes">Admin Notes</label>
                <textarea id="notes" name="notes" rows="4" placeholder="Add any notes or feedback...">{{ contribution.notes if contribution.notes else '' }}</textarea>
            </div>
            
            <button type="submit" class="btn btn-primary">Update Status</button>
        </form>
    </div>
</div>

<div class="danger-zone">
    <h3>Danger Zone</h3>
    <form action="{{ url_for('admin_delete_contribution', contribution_id=contribution.id) }}" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this contribution? This action cannot be undone.');">
        <button type="submit" class="btn btn-danger">Delete Contribution</button>
    </form>
</div>
{% endblock %}

{% block extra_css %}
<style>
.contribution-details {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}
.detail-card, .action-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.detail-card h2 {
    color: #611F3A;
    margin-bottom: 20px;
    font-size: 18px;
}
.detail-row {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.detail-row strong {
    display: inline-block;
    width: 140px;
    color: #555;
}
.detail-section {
    margin-top: 20px;
}
.detail-section strong {
    display: block;
    margin-bottom: 10px;
    color: #555;
}
.abstract-box, .notes-box {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    line-height: 1.6;
}
.action-card h3 {
    color: #611F3A;
    margin-bottom: 20px;
}
.danger-zone {
    background: #fff5f5;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #fee;
}
.danger-zone h3 {
    color: #c00;
    margin-bottom: 15px;
}
</style>
{% endblock %}