{% extends 'base.html' %}
{% block page_title %}Checklist Task Templates{% endblock %}
{% block content %}
<div class="mb-4">
    <a href="{{ url_for('lifecycle_index') }}" class="text-muted text-decoration-none" style="font-size:0.85rem;">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
    <h4 class="fw-bold mt-2 mb-0">Checklist Task Templates</h4>
    <div style="font-size:0.82rem;color:#888;">
        These tasks are auto-added whenever a new checklist is started
    </div>
</div>

<div class="row g-4">

    <!-- ONBOARDING TASKS -->
    <div class="col-lg-6">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold" style="font-size:0.88rem;color:#1b6b3a;">
                    Onboarding Tasks
                </span>
                <form method="POST" action="{{ url_for('lifecycle_templates_add_standard', task_type='onboarding') }}">
                    <button class="btn btn-sm btn-outline-success">
                        <i class="bi bi-stars me-1"></i>Add Standard Set
                    </button>
                </form>
            </div>
            <div class="card-body p-0">
                {% for t in onboarding_tasks %}
                <div class="d-flex justify-content-between align-items-center p-2"
                    style="border-bottom:1px solid #f0f0f0;">
                    <div>
                        <div style="font-size:0.85rem;">{{ t.title }}</div>
                        <span class="badge" style="background:#f0f0f0;color:#555;font-size:0.68rem;">
                            {{ t.category.title() }}
                        </span>
                    </div>
                    <form method="POST" action="{{ url_for('lifecycle_template_delete', task_id=t.id) }}"
                        onsubmit="return confirm('Remove this task?')">
                        <button class="btn btn-sm btn-outline-danger" style="font-size:0.7rem;">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
                {% else %}
                <div class="text-center py-3 text-muted" style="font-size:0.82rem;">
                    No tasks yet
                </div>
                {% endfor %}
            </div>
        </div>

        <form method="POST" action="{{ url_for('lifecycle_template_add') }}" class="card p-3">
            <input type="hidden" name="task_type" value="onboarding">
            <label class="form-label" style="font-size:0.82rem;">Add Custom Task</label>
            <div class="d-flex gap-2">
                <input type="text" name="title" class="form-control form-control-sm" placeholder="Task title" required>
                <select name="category" class="form-select form-select-sm" style="max-width:140px;">
                    <option value="documentation">Documentation</option>
                    <option value="admin">Admin</option>
                    <option value="it">IT</option>
                    <option value="training">Training</option>
                    <option value="finance">Finance</option>
                    <option value="general">General</option>
                </select>
                <button class="btn btn-sm btn-primary">Add</button>
            </div>
        </form>
    </div>

    <!-- OFFBOARDING TASKS -->
    <div class="col-lg-6">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold" style="font-size:0.88rem;color:#dc3545;">
                    Offboarding Tasks
                </span>
                <form method="POST" action="{{ url_for('lifecycle_templates_add_standard', task_type='offboarding') }}">
                    <button class="btn btn-sm btn-outline-success">
                        <i class="bi bi-stars me-1"></i>Add Standard Set
                    </button>
                </form>
            </div>
            <div class="card-body p-0">
                {% for t in offboarding_tasks %}
                <div class="d-flex justify-content-between align-items-center p-2"
                    style="border-bottom:1px solid #f0f0f0;">
                    <div>
                        <div style="font-size:0.85rem;">{{ t.title }}</div>
                        <span class="badge" style="background:#f0f0f0;color:#555;font-size:0.68rem;">
                            {{ t.category.title() }}
                        </span>
                    </div>
                    <form method="POST" action="{{ url_for('lifecycle_template_delete', task_id=t.id) }}"
                        onsubmit="return confirm('Remove this task?')">
                        <button class="btn btn-sm btn-outline-danger" style="font-size:0.7rem;">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
                {% else %}
                <div class="text-center py-3 text-muted" style="font-size:0.82rem;">
                    No tasks yet
                </div>
                {% endfor %}
            </div>
        </div>

        <form method="POST" action="{{ url_for('lifecycle_template_add') }}" class="card p-3">
            <input type="hidden" name="task_type" value="offboarding">
            <label class="form-label" style="font-size:0.82rem;">Add Custom Task</label>
            <div class="d-flex gap-2">
                <input type="text" name="title" class="form-control form-control-sm" placeholder="Task title" required>
                <select name="category" class="form-select form-select-sm" style="max-width:140px;">
                    <option value="documentation">Documentation</option>
                    <option value="admin">Admin</option>
                    <option value="it">IT</option>
                    <option value="finance">Finance</option>
                    <option value="general">General</option>
                </select>
                <button class="btn btn-sm btn-primary">Add</button>
            </div>
        </form>
    </div>

</div>
{% endblock %}