{% extends "base.html" %}
{% block title %}Image Generation — All You Can GET AI{% endblock %}
{% block content %}
<div class="card">
  <h1>Image Generation</h1>
  <form method="post" enctype="multipart/form-data">
    <label for="model">Model</label>
    <input id="model" name="model" type="text" required
           placeholder="e.g. openai/dall-e-3"
           value="{{ request.form.get('model', '') }}">

    <label for="prompt">Prompt</label>
    <textarea id="prompt" name="prompt" rows="4" required
              placeholder="Describe the image you want…">{{ request.form.get('prompt', '') }}</textarea>

    <label for="size">Size</label>
    <select id="size" name="size">
      <option value="1024x1024" {% if request.form.get('size','1024x1024')=='1024x1024' %}selected{% endif %}>1024×1024</option>
      <option value="1792x1024" {% if request.form.get('size')=='1792x1024' %}selected{% endif %}>1792×1024 (landscape)</option>
      <option value="1024x1792" {% if request.form.get('size')=='1024x1792' %}selected{% endif %}>1024×1792 (portrait)</option>
      <option value="512x512"   {% if request.form.get('size')=='512x512' %}selected{% endif %}>512×512</option>
    </select>

    <label for="aspect_ratio">Aspect ratio</label>
    <select id="aspect_ratio" name="aspect_ratio">
      <option value="">Auto (default)</option>
      <option value="1:1" {% if request.form.get('aspect_ratio')=='1:1' %}selected{% endif %}>1:1 (square)</option>
      <option value="16:9" {% if request.form.get('aspect_ratio')=='16:9' %}selected{% endif %}>16:9 (landscape)</option>
      <option value="9:16" {% if request.form.get('aspect_ratio')=='9:16' %}selected{% endif %}>9:16 (portrait)</option>
      <option value="4:3" {% if request.form.get('aspect_ratio')=='4:3' %}selected{% endif %}>4:3</option>
      <option value="3:4" {% if request.form.get('aspect_ratio')=='3:4' %}selected{% endif %}>3:4</option>
      <option value="3:2" {% if request.form.get('aspect_ratio')=='3:2' %}selected{% endif %}>3:2</option>
      <option value="2:3" {% if request.form.get('aspect_ratio')=='2:3' %}selected{% endif %}>2:3</option>
    </select>

    <label for="image_size">Resolution</label>
    <select id="image_size" name="image_size">
      <option value="">Auto (default)</option>
      <option value="0.5K" {% if request.form.get('image_size')=='0.5K' %}selected{% endif %}>0.5K (low)</option>
      <option value="1K" {% if request.form.get('image_size')=='1K' %}selected{% endif %}>1K (standard)</option>
      <option value="2K" {% if request.form.get('image_size')=='2K' %}selected{% endif %}>2K (high)</option>
      <option value="4K" {% if request.form.get('image_size')=='4K' %}selected{% endif %}>4K (ultra)</option>
    </select>

    <label for="n">Number of images</label>
    <select id="n" name="n">
      <option value="1" {% if request.form.get('n','1')=='1' %}selected{% endif %}>1</option>
      <option value="2" {% if request.form.get('n')=='2' %}selected{% endif %}>2</option>
      <option value="4" {% if request.form.get('n')=='4' %}selected{% endif %}>4</option>
    </select>

    <label for="reference_image">Reference image (optional)</label>
    <input
      id="reference_image"
      name="reference_image"
      type="file"
      accept="image/png,image/jpeg,image/webp,image/gif"
    >
    <p class="text-muted mt-1" id="reference-image-help">
      Upload image for visual reference in upcoming image-to-image flow.
    </p>
    <div class="image-upload-preview" id="image-upload-preview" hidden>
      <p class="text-muted" id="image-upload-filename"></p>
      <img id="image-upload-preview-img" alt="Uploaded reference image preview" class="generated-image">
    </div>

    <button type="submit">Generate image</button>
  </form>

  {% if error %}
    <div class="alert alert-error mt-2">{{ error }}</div>
  {% endif %}

  {% if result %}
    <div class="result">
      <h2>Generated image{{ 's' if result.images|length > 1 }}</h2>
      {% for img in result.images %}
        <img src="{{ img.url }}" alt="Generated image" class="generated-image">
        {% if img.revised_prompt %}
          <p class="text-muted mt-1" style="font-size:0.8rem;">{{ img.revised_prompt }}</p>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</div>
{% endblock %}