{% extends "layout.html" %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">Generator Settings</div>
                <div class="card-body">
                    <form action="{{ url_for('generator') }}" method="post">
                        <div class="mb-3">
                            <label for="character" class="form-label">Character</label>
                            <select class="form-select" id="character" name="character" required>
                                <option value="" disabled {% if not selected_char %}selected{% endif %}>Select a character...</option>
                                {% for char in characters %}
                                <option value="{{ char.slug }}" {% if selected_char == char.slug %}selected{% endif %}>{{ char.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label for="checkpoint" class="form-label">Checkpoint Model</label>
                            <select class="form-select" id="checkpoint" name="checkpoint" required>
                                {% for ckpt in checkpoints %}
                                <option value="{{ ckpt }}" {% if selected_ckpt == ckpt %}selected{% endif %}>{{ ckpt }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">Listing models from Illustrious/ folder</div>
                        </div>

                        <div class="mb-3">
                            <label for="positive_prompt" class="form-label">Additional Positive Prompt</label>
                            <textarea class="form-control" id="positive_prompt" name="positive_prompt" rows="3" placeholder="e.g. sitting in a cafe, drinking coffee, daylight"></textarea>
                        </div>

                        <div class="mb-3">
                            <label for="negative_prompt" class="form-label">Additional Negative Prompt</label>
                            <textarea class="form-control" id="negative_prompt" name="negative_prompt" rows="3" placeholder="e.g. bad hands, extra digits"></textarea>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">Generate</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card">
                <div class="card-header bg-dark text-white">Result</div>
                <div class="card-body p-0 d-flex align-items-center justify-content-center" style="min-height: 500px; background-color: #eee;">
                    {% if generated_image %}
                    <div class="img-container w-100 h-100">
                        <img src="{{ url_for('static', filename='uploads/' + generated_image) }}" alt="Generated Result" class="img-fluid w-100">
                    </div>
                    {% else %}
                    <div class="text-center text-muted">
                        <p>Select settings and click Generate</p>
                    </div>
                    {% endif %}
                </div>
                {% if generated_image %}
                <div class="card-footer">
                    <small class="text-muted">Saved to character gallery</small>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}