<?php $pageTitle = t('new_project'); ?>
<div class="page-header">
    <div class="page-header-left">
        <a href="/projects" class="btn btn-ghost btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            <?= t('back') ?>
        </a>
        <h1 class="page-title"><?= t('new_project') ?></h1>
    </div>
</div>

<?php if (!empty($errors)): ?>
<div class="alert alert-error">
    <?php foreach ($errors as $e): ?><div><?= Helper::e($e) ?></div><?php endforeach; ?>
</div>
<?php endif; ?>

<div class="form-card">
    <form method="POST" action="/project/create">
        <?= Helper::csrf() ?>

        <div class="form-group">
            <label class="form-label" for="name"><?= t('project_name') ?> *</label>
            <input type="text" id="name" name="name" class="form-input" required autofocus
                   value="<?= Helper::e(Helper::post('name')) ?>" maxlength="120">
        </div>

        <div class="form-group">
            <label class="form-label" for="description"><?= t('project_desc') ?></label>
            <textarea id="description" name="description" class="form-textarea" rows="3"><?= Helper::e(Helper::post('description')) ?></textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label class="form-label" for="color"><?= t('project_color') ?></label>
                <div class="color-picker-wrap">
                    <input type="color" id="color" name="color"
                           value="<?= Helper::e(Helper::post('color', '#4f46e5')) ?>" class="color-input">
                    <div class="color-presets">
                        <?php foreach (['#4f46e5','#7c3aed','#db2777','#dc2626','#d97706','#059669','#0284c7','#0891b2','#64748b'] as $c): ?>
                        <button type="button" class="color-preset" style="background:<?= $c ?>" data-color="<?= $c ?>" data-click="setColor"></button>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="default_view"><?= t('default_view') ?></label>
                <select id="default_view" name="default_view" class="form-select">
                    <?php $userPrefView = Auth::user()['preferred_view'] ?? 'kanban'; ?>
                    <option value="kanban" <?= Helper::post('default_view', $userPrefView) === 'kanban' ? 'selected' : '' ?>>Kanban</option>
                    <option value="list"   <?= Helper::post('default_view', $userPrefView) === 'list'   ? 'selected' : '' ?>><?= t('list') ?></option>
                    <option value="gantt"  <?= Helper::post('default_view', $userPrefView) === 'gantt'  ? 'selected' : '' ?>>Gantt</option>
                </select>
            </div>
        </div>

        <div class="form-actions">
            <a href="/projects" class="btn btn-ghost"><?= t('cancel') ?></a>
            <button type="submit" class="btn btn-primary">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 5v14M5 12h14"/></svg>
                <?= t('create') ?>
            </button>
        </div>
    </form>
</div>

<script nonce="<?= csp_nonce() ?>">
function setColor(btn) {
    const c = btn.dataset.color;
    document.getElementById('color').value = c;
    document.querySelectorAll('.color-preset').forEach(el => el.classList.toggle('active', el.dataset.color === c));
}
document.addEventListener('DOMContentLoaded', () => {
    const current = document.getElementById('color').value;
    document.querySelectorAll('.color-preset').forEach(el => {
        if (el.dataset.color === current) el.classList.add('active');
    });
});
</script>
