{% extends "base.html" %}

{% block title %}my images - irc.pics{% endblock %}

{% block nav_auth %}
<a href="/auth/logout" class="nav-cta">log out</a>
{% endblock %}

{% block content %}
<div class="content">
  <h1>my images</h1>
  {% if images.is_empty() %}
  <div class="card">
    <p>no images yet. <a href="/">upload one</a>.</p>
  </div>
  {% else %}
  <div class="image-grid">
    {% for img in images %}
    <div class="grid-item">
      <a href="/{{ img.id }}">
        <img src="/{{ img.id }}/thumb" alt="{{ img.filename }}" class="grid-thumb" loading="lazy">
      </a>
      <div class="grid-info">
        <span class="grid-name">{{ img.filename }}</span>
        <span class="grid-meta">{{ img.size }}</span>
        <form method="post" action="/{{ img.id }}/delete" class="inline-form">
          <button type="submit" class="link-btn delete-btn">delete</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endblock %}