{% extends "base.html" %}
{% block content %}
<h2>Admin Panel</h2>

<div class="card mb-4">
    <div class="card-body">
        <h5>Upload Foto</h5>
        <form method="POST" action="/upload" enctype="multipart/form-data">
            <div class="row">
                <div class="col-md-6">
                    <input type="file" name="photo" class="form-control" required>
                </div>
                <div class="col-md-4">
                    <input type="text" name="caption" class="form-control" placeholder="Keterangan">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success w-100">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    {% for photo in photos %}
    <div class="col-md-3">
        <div class="card">
            <img src="/static/uploads/{{ photo.filename }}" style="height:150px; object-fit:cover;">
            <div class="card-body">
                <p>{{ photo.caption or '-' }}</p>
                <a href="/delete/{{ photo.id }}" class="btn btn-danger btn-sm w-100" 
                   onclick="return confirm('Hapus?')">Hapus</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}