{% extends "base.html" %}

{% block title %}AI Image of the Day{% endblock %}

{% block head %}
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            position: relative;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .image-container {
            max-width: 90vw;
            max-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
        }

        .prompt {
            color: #ccc;
            font-family: monospace;
            white-space: pre-wrap;
            background: rgba(0, 0, 0, 0.6);
            padding: 15px 20px;
            border-radius: 10px;
            max-width: 80vw;
            text-align: left;
            max-height: 30vh;
            overflow-y: auto;
        }

        .button-group {
            display: flex;
            gap: 20px;
            margin-top: 15px;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .image-container {
                max-width: 100vw;
                max-height: 50vh;
            }

            img {
                max-width: 100%;
                max-height: 100%;
            }

            .prompt {
                max-height: 20vh;
                font-size: 14px;
                padding: 10px 15px;
            }

            .button-group {
                flex-direction: column;
                gap: 10px;
            }

            .button-link {
                font-size: 14px;
                padding: 8px 16px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    {% if image %}
    <div class="image-container">
        <img src="{{ url_for('image_routes.serve_image', filename=image) }}" alt="Latest Image" />
    </div>
    {% if prompt %}
    <div class="prompt">{{ prompt }}</div>
    <div class="button-group">
        <a href="/images" class="button-link">Archive</a>
        <a href="/create_image" class="button-link">Create Image</a>
    </div>
    {% endif %}
    {% else %}
    <p>No images found</p>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script>
        setInterval(() => {
            location.reload();
        }, {{ reload_interval }});  // Refresh every X ms
    </script>
{% endblock %}