<%- include('partials/layout_start', { activePage: 'sections', pageTitle: 'Manage Website Sections (Bilingual)' }) %>

<div class="admin-section">
    <div class="grid-2">
        <% sections.forEach(section => { %>
            <div class="card" style="padding: 15px; border: 1px solid #ddd; border-radius: 5px;">
                <h4><%= section.section_key.toUpperCase() %></h4>
                <form action="/admin/section/update" method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="section_key" value="<%= section.section_key %>">
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Title (EN)</label>
                        <input type="text" name="title_en" value="<%= section.title_en %>" style="width: 100%; padding: 8px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Title (BN)</label>
                        <input type="text" name="title_bn" value="<%= section.title_bn %>" style="width: 100%; padding: 8px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;">
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Content (EN)</label>
                        <textarea name="content_en" rows="3" style="width: 100%; padding: 8px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;"><%= section.content_en %></textarea>
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Content (BN)</label>
                        <textarea name="content_bn" rows="3" style="width: 100%; padding: 8px; border: 1px solid #475569; background: #0f172a; color: #f1f5f9; border-radius: 4px;"><%= section.content_bn %></textarea>
                    </div>
                    <% if (section.section_key === 'hero' || section.section_key === 'about') { %>
                        <div class="form-group" style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Image Upload</label>
                            <input type="file" name="image" accept="image/*">
                        </div>
                    <% } %>
                    <% if (section.section_key === 'media_kit') { %>
                        <div class="form-group" style="margin-bottom: 15px;">
                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Media Kit PDF Upload</label>
                            <input type="file" name="file" accept=".pdf">
                            <% if(section.file_url){ %><small>Current: <a href="<%=section.file_url%>" target="_blank">PDF</a></small><% } %>
                        </div>
                    <% } %>
                    <button type="submit" class="btn-primary mt-2" style="padding: 10px 20px; background-color: #f59e0b; color: #1e293b; border: none; font-weight: bold; cursor: pointer; border-radius: 4px;">Update Section</button>
                </form>
            </div>
        <% }) %>
    </div>
</div>

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