{% extends "base.html" %}

{% block title %}Admin Panel{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="bi bi-shield-lock-fill"></i> Admin Panel
            </h1>
            <span class="badge bg-success p-3">
                <i class="bi bi-person-circle"></i> {{ current_user.username }}
            </span>
        </div>
    </div>
</div>

<!-- Upload Form -->
<div class="row mb-5">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0"><i class="bi bi-cloud-upload"></i> Upload Foto Baru</h5>
            </div>
            <div class="card-body">
                <form action="{{ url_for('upload_photo') }}" method="POST" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label for="photo" class="form-label">Pilih Foto</label>
                            <input type="file" class="form-control" id="photo" name="photo" 
                                   accept="image/*" required>
                            <small class="text-muted">Format: JPG, PNG, GIF (Max 50MB)</small>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="caption" class="form-label">Keterangan</label>
                            <input type="text" class="form-control" id="caption" name="caption" 
                                   placeholder="Contoh: Foto bareng">
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-cloud-upload"></i> Upload Foto
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Daftar Foto -->
<div class="row">
    <div class="col-12">
        <h3 class="mb-3">Daftar Foto</h3>
    </div>
    
    {% for photo in photos %}
    <div class="col-md-4 col-sm-6 mb-4">
        <div class="card admin-card h-100">
            <div class="position-relative">
                <img src="{{ url_for('static', filename='uploads/' + photo.filename) }}" 
                     class="card-img-top" alt="{{ photo.caption }}">
                <div class="photo-overlay">
                    <a href="{{ url_for('delete_photo', photo_id=photo.id) }}" 
                       class="btn btn-danger btn-sm"
                       onclick="return confirm('Yakin ingin menghapus foto ini?')">
                        <i class="bi bi-trash"></i> Hapus
                    </a>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">{{ photo.caption or 'Tanpa keterangan' }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted">
                        <i class="bi bi-heart-fill text-danger"></i> {{ photo.likes_count }} likes
                    </small>
                    <small class="text-muted">
                        <i class="bi bi-calendar"></i> {{ photo.upload_date.strftime('%d/%m/%Y %H:%M') }}
                    </small>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-12">
        <div class="alert alert-info text-center">
            <i class="bi bi-info-circle"></i> Belum ada foto yang diupload
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}