<div class="card" style="margin-bottom: 24px;">
    <div class="card-header">
        <h2 class="card-title">Tambah Proyek Baru</h2>
    </div>
    
    <% if (typeof message !== 'undefined' && message) { %>
        <div class="alert alert-success"><%= message %></div>
    <% } %>

    <form action="/admin/projects" method="POST" enctype="multipart/form-data">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <div class="form-group">
                <label for="title">Nama Proyek</label>
                <input type="text" id="title" name="title" class="form-control" required>
            </div>
            <div class="form-group">
                <label for="client_name">Nama Client / Partner</label>
                <input type="text" id="client_name" name="client_name" class="form-control" required>
            </div>
        </div>
        <div class="form-group">
            <label for="image">Gambar Proyek (Bisa lebih dari 1)</label>
            <input type="file" id="image" name="images" class="form-control" accept="image/*" multiple required>
        </div>
        <button type="submit" class="btn btn-primary">Tambah Proyek</button>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Daftar Proyek</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>Gambar (Sampul)</th>
                <th>Nama Proyek</th>
                <th>Client</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <% if (projects.length === 0) { %>
                <tr><td colspan="4" style="text-align: center;">Belum ada data proyek.</td></tr>
            <% } %>
            <% projects.forEach(function(project) { 
                let urls = [];
                try {
                    urls = JSON.parse(project.image_url);
                } catch(e) {}
                let cover = urls.length > 0 ? urls[0] : '';
            %>
                <tr>
                    <td>
                        <% if (cover) { %>
                            <img src="/<%= cover %>" class="img-preview" alt="Project">
                            <div style="font-size: 11px; color: #6b7280; text-align: center; margin-top: 4px;">(<%= urls.length %> gambar)</div>
                        <% } else { %>
                            <div style="font-size: 11px; color: #6b7280;">Tidak ada gambar</div>
                        <% } %>
                    </td>
                    <td><strong><%= project.title %></strong></td>
                    <td><%= project.client_name %></td>
                    <td>
                        <form action="/admin/projects/<%= project.id %>/delete" method="POST" onsubmit="return confirm('Yakin ingin menghapus proyek ini?');">
                            <button type="submit" class="btn btn-danger" style="padding: 6px 12px; font-size: 12px;">Hapus</button>
                        </form>
                    </td>
                </tr>
            <% }); %>
        </tbody>
    </table>
</div>
