admin_photos.html

{% extends "base.html" %}
{% block title %}Photo admin{% endblock %}

{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/admin_page.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/admin_photos.css') }}">
{% endblock %}

{% block content %}
  <div class="admin-wrap">
    <div class="admin-top">
      <h1 class="admin-title">Photos</h1>
      <div class="admin-row">
        <a class="btn" href="{{ url_for('admin_posts') }}">Blog</a>
        <a class="btn" href="{{ url_for('photos') }}" target="_blank" rel="noopener">View gallery</a>
        <a class="btn" href="{{ url_for('admin_logout') }}">Logout</a>
      </div>
    </div>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for m in messages %}
          <div class="flash">{{ m }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <!-- Upload form -->
    <details class="upload-panel" {% if not photos %}open{% endif %}>
      <summary class="upload-summary">Upload new photo</summary>
      <form class="upload-form" method="post" action="{{ url_for('admin_photos_upload') }}" enctype="multipart/form-data">
        <div class="uf-file-row">
          <label class="uf-label">Photo file <span class="uf-req">*</span></label>
          <input type="file" name="photo" accept=".jpg,.jpeg,.png,.webp,.gif" required class="uf-file-input">
          <p class="uf-hint">Upload webp for web display. Keep file sizes small.</p>
        </div>

        <div class="uf-grid">
          <div class="uf-field">
            <label class="uf-label">Title</label>
            <input type="text" name="title" placeholder="e.g. Sunrise at Darjeeling" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Original image URL</label>
            <input type="url" name="original_url" class="uf-input">
            <p class="uf-hint">Link to the full-res original (shown as "Load original" button).</p>
          </div>
          <div class="uf-field">
            <label class="uf-label">Camera</label>
            <input type="text" name="camera" placeholder="e.g. Apple iPhone 16 Pro" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Lens</label>
            <input type="text" name="lens" placeholder="e.g. 7mm f/1.78" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Focal Length</label>
            <input type="text" name="focal_length" placeholder="e.g. 7mm" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Aperture</label>
            <input type="text" name="aperture" placeholder="e.g. f/1.78" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Shutter Speed</label>
            <input type="text" name="shutter_speed" placeholder="e.g. 1/184s" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">ISO</label>
            <input type="text" name="iso" placeholder="e.g. 200" class="uf-input">
          </div>
          <div class="uf-field">
            <label class="uf-label">Date Taken</label>
            <input type="text" name="date_taken" placeholder="e.g. 2024-11-24" class="uf-input">
          </div>
        </div>

        <button type="submit" class="btn" style="margin-top:4px;">Upload photo</button>
      </form>
    </details>

    <!-- Photos list -->
    {% if photos %}
      <div class="photo-grid">
        {% for p in photos %}
          <div class="photo-card">
            <div class="photo-thumb-wrap">
              <img class="photo-thumb" src="{{ url_for('static', filename='photos/' ~ p.filename) }}" alt="{{ p.title or p.filename }}">
            </div>
            <div class="photo-card-body">
              <p class="photo-card-title">{{ p.title or '(untitled)' }}</p>
              <div class="photo-meta-mini">
                {% if p.camera %}<span>{{ p.camera }}</span>{% endif %}
                {% if p.date_taken %}<span>{{ p.date_taken }}</span>{% endif %}
                {% if p.original_url %}
                  <a href="{{ p.original_url }}" target="_blank" rel="noreferrer" class="orig-link">Original ↗</a>
                {% endif %}
              </div>
              <form method="post" action="{{ url_for('admin_photos_delete', photo_id=p.id) }}" onsubmit="return confirm('Delete this photo?');" style="margin-top:8px;">
                <button class="btn btn-danger" type="submit">Delete</button>
              </form>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="page-desc" style="margin-top:16px;">No photos yet. Upload one above.</p>
    {% endif %}
  </div>
{% endblock %}