<link rel="stylesheet" href="/public/css/enroll-page-custom.css">

<div class="container-sm align-items-center">
    <div class="py-2 mt-4 align-items-center">
        <h1 class="text-center">Topluluğumuza Katılın</h1>
        <!-- Registration Form -->
        <div class="ml-5 pt-3 align-items-center form-container m-auto responsive-reduced-width">
            <form action="/enroll" method="POST">
                <div class="d-flex row">

                    <!-- First Name -->
                    <div class="input-group col-lg-6 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-person fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="firstName" type="text" name="firstName" placeholder="İsim" class="form-control bg-white border-left-0 border-md" required>
                    </div>

                    <!-- Last Name -->
                    <div class="input-group col-lg-6 mb-4 fs-2">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-person" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="lastName" type="text" name="lastName" placeholder="Soyisim" class="form-control bg-white border-left-0 border-md" required>
                    </div>

                    <!-- Email Address -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-envelope fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="email" type="email" name="email" placeholder="Mail Adresi" class="form-control bg-white border-left-0 border-md" required>
                    </div>

                    <!-- Department -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-building fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="department" type="text" name="department" placeholder="Bölümünüz" class="form-control bg-white border-left-0 border-md" required>
                    </div>

                    <!-- Degree -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-list-ol fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <select class="form-control" id="class" name="degree" required>
                            <option hidden value="">Sınıfınız ↓</option>
                            <option>Hazırlık</option>
                            <option>1. Sınıf</option>
                            <option>2. Sınıf</option>
                            <option>3. Sınıf</option>
                            <option>4. Sınıf</option>
                            <option>Yüksek Lisans</option>
                            <option>Doktora</option>
                            <option>Diğer</option>
                        </select>
                    </div>


                    <!-- Phone Number -->
                    <div class="input-group col-lg-6 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-telephone fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="phoneNumber" type="tel" name="mobileNumber" placeholder="Telefon Numarası" class="form-control bg-white border-md border-left-0" required>
                    </div>

                    <!-- Student Number -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-123 fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <input id="studentNumber" type="tel" name="studentID" placeholder="Öğrenci Numarası" class="form-control bg-white border-left-0 border-md" required>
                    </div>

                    <!-- Social -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-chat-left-text fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>

                        <select class="form-control" id="class" name="groupChat" required>
                            <option hidden value="">Size nereden ulaşalım? ↓</option>
                            <option>Signal</option>
                            <option>Telegram</option>
                            <option>WhatsApp</option>
                        </select>
                    </div>

                    <!-- Tell us -->
                    <div class="input-group col-lg-12 mb-4">
                        <div class="input-group-prepend">
                            <span class="px-1 border-md border-right-0 me-2">
                                <i class="bi bi-send fs-2" style="color: #ff4100;"></i>
                            </span>
                        </div>
                        <textarea class="form-control bg-white border-left-0 border-md" id="tellus" placeholder="Söylemek istediğin bir şey var mı?" name="tellus" rows="3"></textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="form-group mb-0" style="margin-left: 47px;">
                        <input id="signup-btn" class="btn btn-outline" type="submit" value="Üye Ol">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
