{% 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_lesson') }}" method="POST" class="space-y-4">

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    授業名
                </label>

                <input
                    type="text"
                    name="lesson_name"
                    required
                    class="w-full rounded-md border border-slate-300 p-2"
                >
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    担当教員
                </label>

                <input
                    type="text"
                    name="instructor_name"
                    class="w-full rounded-md border border-slate-300 p-2"
                >
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    曜日
                </label>

                <select
                    name="weekday"
                    required
                    class="w-full rounded-md border border-slate-300 p-2"
                >
                    <option value="1">月曜日</option>
                    <option value="2">火曜日</option>
                    <option value="3">水曜日</option>
                    <option value="4">木曜日</option>
                    <option value="5">金曜日</option>
                    <option value="6">土曜日</option>
                    <option value="7">日曜日</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    開始時間
                </label>

                <input
                    type="time"
                    name="start_time"
                    required
                    class="w-full rounded-md border border-slate-300 p-2"
                >
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    終了時間
                </label>

                <input
                    type="time"
                    name="end_time"
                    required
                    class="w-full rounded-md border border-slate-300 p-2"
                >
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">
                    教室
                </label>

                <input
                    type="text"
                    name="location"
                    class="w-full rounded-md border border-slate-300 p-2"
                >
            </div>

            <button
                type="submit"
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md"
            >
                授業を登録
            </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 lesson in lessons %}

            <div class="border border-slate-200 rounded-lg p-4">

                <div class="flex justify-between items-start">

                    <div>

                        <h3 class="text-lg font-bold text-slate-800">
                            {{ lesson.lesson_name }}
                        </h3>

                        <p class="text-sm text-slate-500 mt-1">
                            👨‍🏫 {{ lesson.instructor_name or '未設定' }}
                        </p>

                        <p class="text-sm text-slate-500">
                            🏫 {{ lesson.location or '未設定' }}
                        </p>

                        <p class="text-sm text-slate-500">
                            ⏰ {{ lesson.start_time }} 〜 {{ lesson.end_time }}
                        </p>

                    </div>

                </div>

            </div>

            {% else %}

            <div class="text-center py-12 text-slate-400">
                授業は登録されていません
            </div>

            {% endfor %}

        </div>

    </div>

</div>

{% endblock %}