{% extends "base.html" %} {% block title %}Dashboard — All You Can GET AI{%
endblock %} {% block content %}
<div class="card">
  <h1>Welcome{% if user.get('email') %}, {{ user.email }}{% endif %}</h1>
  <p>Role: <strong>{{ user.get('role', 'user') }}</strong></p>
  <a href="{{ url_for('generate') }}" class="btn">Start generating</a>
</div>

{% if pending_videos %}
<div class="card mt-2">
  <h2>Pending Video Jobs</h2>
  <div class="image-grid">
    {% for vid in pending_videos %}
    <a
      href="{{ url_for('video_detail', video_id=vid.id) }}"
      class="image-grid-item"
    >
      <div
        style="
          background: #1a1a1a;
          border-radius: 6px;
          padding: 2rem;
          text-align: center;
        "
      >
        <span class="text-muted">{{ vid.status | capitalize }} &hellip;</span>
      </div>
      <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
        <strong>{{ vid.model_id }}</strong><br />{{ vid.prompt[:80] }}{% if
        vid.prompt|length > 80 %}…{% endif %}
      </p>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %} {% if generated_images %}
<div class="card mt-2">
  <h2>Generated images</h2>
  <div class="image-grid">
    {% for img in generated_images %}
    <a
      href="{{ url_for('image_detail', image_id=img.id) }}"
      class="image-grid-item"
    >
      <img
        src="{{ img.image_data }}"
        alt="{{ img.prompt }}"
        class="generated-image"
        loading="lazy"
      />
      <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
        <strong>{{ img.model_id }}</strong><br />{{ img.prompt[:80] }}{% if
        img.prompt|length > 80 %}…{% endif %}
      </p>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %} {% if completed_videos %}
<div class="card mt-2">
  <h2>Generated videos</h2>
  <div class="image-grid">
    {% for vid in completed_videos %}
    <a
      href="{{ url_for('video_detail', video_id=vid.id) }}"
      class="image-grid-item"
    >
      {% if vid.video_url %}
      <video controls style="max-width: 100%; border-radius: 6px">
        <source src="{{ vid.video_url }}" />
        Your browser does not support the video tag.
      </video>
      {% else %}
      <div
        style="
          background: #1a1a1a;
          border-radius: 6px;
          padding: 2rem;
          text-align: center;
        "
      >
        <span class="text-muted">{{ vid.status | capitalize }} &hellip;</span>
      </div>
      {% endif %}
      <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
        <strong>{{ vid.model_id }}</strong><br />{{ vid.prompt[:80] }}{% if
        vid.prompt|length > 80 %}…{% endif %}<br />
        <em>{{ vid.status }}</em>
      </p>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %} {% if images %}
<div class="card mt-2">
  <h2>Uploaded reference images</h2>
  <div class="image-grid">
    {% for img in images %}
    <a
      href="{{ url_for('upload_detail', image_id=img.id) }}"
      class="image-grid-item"
    >
      <img
        src="{{ url_for('serve_uploaded_image', image_id=img.id) }}"
        alt="{{ img.filename }}"
        class="generated-image"
        loading="lazy"
      />
      <p class="text-muted" style="font-size: 0.75rem; margin-top: 0.25rem">
        {{ img.filename }} &mdash; {{ (img.size_bytes / 1024) | round(1) }} KB
      </p>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %} {% endblock %}