<%- include('partials/layout_start', { activePage: 'services', pageTitle: 'Manage Services & Brand Collabs' }) %>

<div class="admin-section">
    <div style="max-width: 600px;">
        <form action="/admin/service/add" method="POST" style="margin-bottom: 30px; background: #1e293b; padding: 20px; border-radius: 8px; border: 1px solid #334155;">
            <h4 style="margin-top: 0; margin-bottom: 15px;">Add New Service</h4>
            <div style="display:flex; gap:15px; margin-bottom: 15px;">
                <input type="text" name="name_en" placeholder="Service Name (EN)" required style="width:50%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
                <input type="text" name="name_bn" placeholder="Service Name (BN)" required style="width:50%; padding: 10px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
            </div>
            <button type="submit" class="btn-primary" style="padding: 10px 20px; background-color: #f59e0b; color: #1e293b; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;">Add Service</button>
        </form>
        
        <h4 style="margin-bottom: 15px;">Existing Services</h4>
        <ul style="list-style:none; padding:0; margin: 0;">
            <% services.forEach(service => { %>
                <li style="display:flex; justify-content:space-between; align-items: center; margin-bottom:10px; padding: 15px; background: #1e293b; border: 1px solid #334155; border-radius: 6px;">
                    <div>
                        <strong>EN:</strong> <%= service.name_en %> <br>
                        <strong style="color: #64748b; font-size: 0.9em;">BN:</strong> <span style="color: #64748b; font-size: 0.9em;"><%= service.name_bn %></span>
                    </div>
                    <form action="/admin/service/delete/<%= service.id %>" method="POST" style="margin: 0;">
                        <button type="submit" style="color:white; background: #ef4444; border:none; cursor:pointer; width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center;"><i class="fas fa-trash-alt"></i></button>
                    </form>
                </li>
            <% }) %>
        </ul>
    </div>
</div>

<%- include('partials/layout_end') %>
