{% extends 'base.html' %}

{% block title %}Edit Image | 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.images') }}">Images</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Edit Image</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <form action="{{ url_for('admin.edit_image', id=image.id) }}" method="POST">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <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>Image Details</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-8">
                                    <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="{{ image.title }}">
                                </div>
                                <div class="col-md-4">
                                    <label for="category" class="form-label">Category</label>
                                    <select class="form-select" id="category" name="category">
                                        <option value="page" {{ 'selected' if image.category == 'page' }}>Page Image</option>
                                        <option value="article" {{ 'selected' if image.category == 'article' }}>Article Image</option>
                                        <option value="journal" {{ 'selected' if image.category == 'journal' }}>Journal Cover</option>
                                        <option value="author" {{ 'selected' if image.category == 'author' }}>Author Photo</option>
                                        <option value="other" {{ 'selected' if image.category == 'other' }}>Other</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label for="alt_text" class="form-label">Alt Text</label>
                                    <input type="text" class="form-control" id="alt_text" name="alt_text"
                                           value="{{ image.alt_text or '' }}"
                                           placeholder="Describe the image for accessibility">
                                    <div class="form-text">Important for accessibility and SEO</div>
                                </div>
                                <div class="col-12">
                                    <label for="page" class="form-label">Associated Page</label>
                                    <select class="form-select" id="page" name="page">
                                        <option value="">None</option>
                                        <option value="home" {{ 'selected' if image.page == 'home' }}>Home</option>
                                        <option value="about" {{ 'selected' if image.page == 'about' }}>About</option>
                                        <option value="for_authors" {{ 'selected' if image.page == 'for_authors' }}>For Authors</option>
                                        <option value="open_access" {{ 'selected' if image.page == 'open_access' }}>Open Access</option>
                                        <option value="contact" {{ 'selected' if image.page == 'contact' }}>Contact</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary py-2 px-4">
                            <i class="fas fa-save me-2"></i>Save Changes
                        </button>
                        <a href="{{ url_for('admin.images') }}" class="btn btn-outline-secondary py-2 px-4">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
            
            <div class="col-lg-4">
                <!-- Image Preview -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-image me-2"></i>Preview</h5>
                    </div>
                    <div class="card-body p-0">
                        <img src="{{ url_for('main.uploaded_file', filename= image.filename) }}" 
                             alt="{{ image.alt_text or image.title }}"
                             class="img-fluid w-100">
                    </div>
                </div>
                
                <!-- Image 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>Information</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm table-borderless mb-0">
                            <tr>
                                <th class="text-muted">Filename</th>
                                <td class="text-break">{{ image.filename }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Uploaded</th>
                                <td>{{ image.created_at.strftime('%b %d, %Y %H:%M') }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted">Updated</th>
                                <td>{{ image.updated_at.strftime('%b %d, %Y %H:%M') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <!-- URL Copy -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent">
                        <h5 class="mb-0"><i class="fas fa-link me-2"></i>Image URL</h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" id="imageUrl" readonly
                                   value="{{ url_for('main.uploaded_file', filename= image.filename, _external=true) }}">
                            <button type="button" class="btn btn-outline-primary" onclick="copyUrl()">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="form-text">Click to copy the image URL</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
function copyUrl() {
    const urlInput = document.getElementById('imageUrl');
    urlInput.select();
    navigator.clipboard.writeText(urlInput.value);
    
    // Show feedback
    const btn = urlInput.nextElementSibling;
    const icon = btn.querySelector('i');
    icon.className = 'fas fa-check text-success';
    setTimeout(() => {
        icon.className = 'fas fa-copy';
    }, 2000);
}
</script>
{% endblock %}