{% extends "base.html" %}

{% block title %}Create An Image{% endblock %}

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

    textarea {
        width: 80vw;
        height: 200px;
        border-radius: 10px;
        padding: 15px;
        font-size: 16px;
        font-family: monospace;
        resize: none;
        margin-bottom: 20px;
        background: #111;
        color: #eee;
        border: 1px solid #333;
    }

    .button-group {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .model-selection {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        margin: 20px 0;
        width: 100%;
        max-width: 800px;
    }

    .model-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .model-group label {
        font-weight: bold;
        color: #ddd;
    }

    button,
    select {
        background: #333;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
        min-width: 150px;
    }

    button:hover,
    select:hover {
        background: #555;
    }

    #spinner-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        visibility: hidden;
        z-index: 1000;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 6px solid #555;
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @media (max-width: 600px) {
        body {
            min-height: 100dvh;
            height: auto;
            justify-content: flex-start;
            padding-top: 40px;
        }

        .button-group {
            flex-direction: column;
            align-items: stretch;
            width: 100%;
        }

        .model-selection {
            flex-direction: column;
            align-items: stretch;
        }

        .model-group {
            align-items: stretch;
        }

        button,
        select {
            width: 100%;
        }

        textarea {
            height: 150px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div style="position: fixed; top: 20px; right: 20px; background: #333; padding: 5px 10px; border-radius: 5px; z-index: 1000;">
    Queue: {{ queue_count | default(0) }}
</div>
<h1 style="margin-bottom: 20px;">Create An Image</h1>

<textarea id="prompt-box" placeholder="Enter your custom prompt here..."></textarea>

<div class="button-group">
    <button onclick="showSpinner(); location.href='/'">Back</button>
    <button onclick="sendPrompt()">Send Prompt</button>
    <button onclick="randomPrompt()">Random Prompt</button>
</div>

<div class="model-selection">
    <div class="model-group">
        <label for="model-select">Image Model:</label>
        <select id="model-select">
            <option value="" selected>Random Image Model</option>
            {% if flux_models %}
            <optgroup label="FLUX">
                {% for m in flux_models %}
                <option value="{{ m }}">{{ m.rsplit('.', 1)[0] if '.' in m else m }}</option>
                {% endfor %}
            </optgroup>
            {% endif %}
            {% if qwen_models %}
            <optgroup label="Qwen">
                {% for m in qwen_models %}
                <option value="{{ m }}">{{ m.rsplit('.', 1)[0] if '.' in m else m }}</option>
                {% endfor %}
            </optgroup>
            {% endif %}
            {% if sdxl_models %}
            <optgroup label="SDXL">
                {% for m in sdxl_models %}
                <option value="{{ m }}">{{ m.rsplit('.', 1)[0] if '.' in m else m }}</option>
                {% endfor %}
            </optgroup>
            {% endif %}
        </select>
    </div>
    
    <div class="model-group">
        <label for="prompt-model-select">Prompt Model:</label>
        <select id="prompt-model-select">
            <option value="" selected>Random Prompt Model</option>
            {% if openwebui_models %}
            <optgroup label="OpenWebUI">
                {% for m in openwebui_models %}
                <option value="openwebui:{{ m }}">{{ m }}</option>
                {% endfor %}
            </optgroup>
            {% endif %}
            {% if openrouter_models %}
            <optgroup label="OpenRouter">
                {% for m in openrouter_models %}
                <option value="openrouter:{{ m }}">{{ m }}</option>
                {% endfor %}
            </optgroup>
            {% endif %}
        </select>
    </div>
    
    <div class="model-group">
        <label for="topic-select">Topic:</label>
        <select id="topic-select">
            <option value="">No Topic</option>
            <option value="random">Random</option>
            <optgroup label="Topics">
                {% for t in topics %}
                <option value="{{ t }}">{{ t }}</option>
                {% endfor %}
            </optgroup>
        </select>
    </div>
</div>

<div id="spinner-overlay">
    <div class="spinner"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const overlay = document.getElementById('spinner-overlay');

    function showSpinner() { overlay.style.visibility = 'visible'; }

    function sendPrompt() {
        showSpinner();
        const prompt = document.getElementById('prompt-box').value;
        const model = document.getElementById('model-select').value;
        const promptModel = document.getElementById('prompt-model-select').value;

        const formData = new URLSearchParams();
        formData.append('prompt', prompt);
        formData.append('model', model);
        formData.append('prompt_model', promptModel);

        fetch('/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: formData.toString()
        })
            .then(response => {
                window.location.href = response.redirected ? response.url : '/create';
            })
            .catch(error => {
                overlay.style.visibility = 'hidden';
                alert("Error sending prompt: " + error);
            });
    }

    function randomPrompt() {
        showSpinner();
        const model = document.getElementById('model-select').value;
        const promptModel = document.getElementById('prompt-model-select').value;
        const topic = document.getElementById('topic-select').value;

        const formData = new URLSearchParams();
        formData.append('model', model);
        formData.append('prompt_model', promptModel);
        formData.append('topic', topic);

        fetch('/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: formData.toString()
        })
            .then(response => {
                window.location.href = response.redirected ? response.url : '/create';
            })
            .catch(error => {
                overlay.style.visibility = 'hidden';
                alert("Error requesting random prompt: " + error);
            });
    }
</script>
{% endblock %}