{% extends 'base.html' %}

{% block content %}

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- タスク追加 -->
    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-fit">

        <h2 class="text-lg font-bold text-slate-900 mb-4 border-b pb-2">
            ✏️ 新規タスク・課題登録
        </h2>

        <form action="{{ url_for('create_task') }}" method="POST" class="space-y-4">

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    タスク名 / 課題名
                </label>

                <input
                    type="text"
                    name="title"
                    required
                    class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                >
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    提出・実施期限
                </label>

                <input
                    type="datetime-local"
                    name="due_date"
                    class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                >

                <span class="text-xs text-slate-400 mt-1 block">
                    ※ 空欄でも登録できます
                </span>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    詳細メモ
                </label>

                <textarea
                    name="description"
                    rows="4"
                    class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                ></textarea>
            </div>

            <button
                type="submit"
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow transition text-sm"
            >
                タスクを追加する
            </button>

        </form>
    </div>

    <!-- タスク一覧 -->
    <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-200">

        <h2 class="text-xl font-bold text-slate-900 mb-4">
            📋 現在のタスク一覧
        </h2>

        <div class="space-y-4">

            {% for task in tasks %}

            <div class="p-4 rounded-lg border {% if task.status == 'done' %}bg-slate-50 border-slate-200{% else %}bg-white border-indigo-100 shadow-sm{% endif %} flex justify-between items-start">

                <div class="flex items-start">

                    <!-- 完了 -->
                    <form
                        action="{{ url_for('complete_task', task_id=task.id) }}"
                        method="POST"
                        class="mr-3 mt-0.5"
                    >

                        <button
                            type="submit"
                            class="flex items-center justify-center w-6 h-6 rounded-full border-2 transition {% if task.status == 'done' %}bg-emerald-500 border-emerald-500 text-white{% else %}border-slate-300 hover:border-emerald-500 text-transparent hover:text-emerald-500{% endif %}"
                        >
                            ✓
                        </button>

                    </form>

                    <!-- 内容 -->
                    <div class="space-y-1">

                        <div class="flex items-center space-x-2">

                            {% if task.status == 'done' %}

                                <span class="px-2 py-0.5 text-xs font-semibold bg-slate-200 text-slate-600 rounded">
                                    完了
                                </span>

                                <h3 class="text-base font-bold text-slate-400 line-through">
                                    {{ task.title }}
                                </h3>

                            {% else %}

                                <span class="px-2 py-0.5 text-xs font-semibold bg-red-100 text-red-700 rounded">
                                    未完了
                                </span>

                                <h3 class="text-base font-bold text-slate-800">
                                    {{ task.title }}
                                </h3>

                            {% endif %}

                        </div>

                        <p class="text-sm text-slate-500">
                            {{ task.description or '詳細なし' }}
                        </p>

                        {% if task.due_date %}

                            <p class="text-xs font-medium text-slate-400">
                                🕒 期限: {{ task.due_date }}
                            </p>

                        {% else %}

                            <p class="text-xs font-medium text-slate-400">
                                🕒 期限: なし
                            </p>

                        {% endif %}

                    </div>
                </div>

                <!-- ボタン -->
                <div class="flex space-x-2">

                    <a
                        href="{{ url_for('edit_task', task_id=task.id) }}"
                        class="text-sm bg-indigo-50 text-indigo-600 hover:bg-indigo-100 px-3 py-1.5 rounded font-medium transition"
                    >
                        編集
                    </a>

                    <form
                        action="{{ url_for('delete_task', task_id=task.id) }}"
                        method="POST"
                        onsubmit="return confirm('このタスクを削除しますか？');"
                    >

                        <button
                            type="submit"
                            class="text-sm bg-red-50 text-red-600 hover:bg-red-100 px-3 py-1.5 rounded font-medium transition"
                        >
                            削除
                        </button>

                    </form>

                </div>

            </div>

            {% else %}

            <div class="text-center py-12 text-slate-400">
                登録されているタスクはありません。
            </div>

            {% endfor %}

        </div>

    </div>

</div>

{% endblock %}