{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <h1 class="mb-4">Cipher Shield: Image Generation</h1>
            <p class="lead text-muted mb-5">Unleash your creativity. Describe the image you want to create, and let our AI bring it to life.</p>

            <div class="card shadow-sm">
                <div class="card-body">
                    <form id="image-form" method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <textarea class="form-control" id="prompt" name="prompt" rows="3" placeholder="e.g., A futuristic cityscape at sunset, with flying cars and neon lights"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg">Generate Image</button>
                    </form>
                </div>
            </div>

            <div id="image-result" class="mt-5">
                <div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
                    <span class="visually-hidden">Loading...</span>
                </div>
                {% if image_url %}
                <h3 class="mb-4">Your Masterpiece</h3>
                <img id="generated-image" class="img-fluid rounded shadow" src="{{ image_url }}" alt="Generated Image">
                {% endif %}
                {% if error_message %}
                <div id="error-message" class="alert alert-danger mt-3">
                    {{ error_message }}
                </div>
                {% endif %}
            </div>

        </div>
    </div>
</div>

<script>
    document.getElementById('image-form').addEventListener('submit', function() {
        document.getElementById('loading-spinner').style.display = 'block';
    });
</script>
{% endblock %}