<?php ob_start(); ?>

<div class="content-header">
    <div>
        <h2><?= __('admin.themes.upload_title') ?></h2>
        <p style="margin:0; font-size:0.875rem; color:var(--gray-500,#6b7280);"><?= __('admin.themes.upload_text') ?></p>
    </div>
    <div class="header-actions">
        <a href="/admin/themes" class="btn btn-secondary"><- <?= __('admin.themes.back') ?></a>
    </div>
</div>

<div style="display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; max-width:900px;">

    <!-- Upload form -->
    <div>
        <form method="POST" action="/admin/themes/upload" enctype="multipart/form-data" class="admin-form" id="themeUploadForm">
            <?= $csrf->field() ?>

            <div class="form-card">
                <h4><?= __('admin.themes.upload_title') ?></h4>

                <div class="form-group">
                    <label for="theme_zip"><?= __('admin.themes.upload_label') ?></label>
                    <input type="file" id="theme_zip" name="theme_zip" accept=".zip" required
                           style="display:block; width:100%; padding:0.45rem 0.6rem;
                                  border:1px solid var(--gray-300,#d1d5db); border-radius:5px;
                                  background:#fff; font-size:0.875rem; box-sizing:border-box;">
                    <small class="form-hint"><?= __('admin.themes.upload_hint') ?></small>
                </div>

                <div style="display:flex; gap:0.625rem; align-items:center; margin-top:1rem;">
                    <button type="submit" class="btn btn-primary" id="uploadBtn">
                        <?= __('admin.themes.upload_btn') ?>
                    </button>
                    <a href="/admin/themes" class="btn btn-secondary"><?= __('admin.common.cancel') ?></a>
                </div>
            </div>
        </form>

        <script>
        document.getElementById('themeUploadForm').addEventListener('submit', function() {
            var btn = document.getElementById('uploadBtn');
            btn.textContent = '<?= __('admin.common.loading') ?>';
            btn.disabled = true;
        });
        </script>
    </div>

    <!-- Package format reference -->
    <div class="form-card">
        <h4><?= __('admin.themes.format_title') ?></h4>
        <p style="font-size:0.85rem; color:var(--gray-600,#4b5563); margin:0 0 0.75rem;">
            A valid theme package is a <code>.zip</code> file containing:
        </p>
        <pre style="background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200,#e5e7eb);
                    padding:0.75rem 1rem; border-radius:6px; font-size:0.78rem;
                    overflow:auto; margin:0 0 0.875rem; line-height:1.6;"><?= htmlspecialchars(
'theme-name.zip
├── theme.json       ← required
├── templates/       ← required
│   ├── layout.php
│   ├── home.php
│   └── ...
└── assets/          ← optional
    ├── css/
    └── js/'
) ?></pre>

        <p style="font-size:0.83rem; font-weight:600; margin:0 0 0.4rem; color:var(--gray-700,#374151);">
            Required <code>theme.json</code>:
        </p>
        <pre style="background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200,#e5e7eb);
                    padding:0.75rem 1rem; border-radius:6px; font-size:0.78rem;
                    overflow:auto; margin:0 0 0.875rem; line-height:1.6;"><?= htmlspecialchars(
'{
  "slug":    "my-theme",
  "name":    "My Theme",
  "version": "1.0.0",
  "author":  "Your Name",
  "description": "Short description."
}'
) ?></pre>

        <ul style="font-size:0.82rem; margin:0; padding-left:1.1rem;
                   color:var(--gray-600,#4b5563); line-height:1.8;">
            <li><strong>slug</strong>: lowercase letters, digits and hyphens only</li>
            <li>The ZIP can be flat or wrapped in one subdirectory</li>
            <li>Assets are automatically mirrored to <code>public/themes/</code></li>
            <li>Re-uploading the same slug updates the theme</li>
        </ul>
    </div>

</div>

<?php $content = ob_get_clean(); include dirname(__DIR__) . '/layouts/admin.php'; ?>
