{% extends "base.html" %}
{% block content %}
<div class="card">
    <div class="card-header bg-dark text-white">
        <h5><i class="bi bi-cloud-upload"></i> Upload Foto/Video</h5>
    </div>
    <div class="card-body">
        <form method="POST" action="/upload" enctype="multipart/form-data">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <input type="file" class="form-control" name="file" accept="image/*,video/*" required>
                </div>
                <div class="col-md-4 mb-3">
                    <input type="text" class="form-control" name="caption" placeholder="Keterangan">
                </div>
                <div class="col-md-2 mb-3">
                    <button type="submit" class="btn btn-success w-100">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row mt-4">
    {% for photo in photos %}
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card">
            <img src="/static/uploads/{{ photo.filename }}" style="height:150px; object-fit:cover;">
            <div class="card-body">
                <p class="small">{{ photo.caption or '-' }}</p>
                <p>❤️ {{ photo.likes }}</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 %}