<style>
    @media print {
        @page { size: A4 portrait; margin: 0; }
        body { margin: 0; }
        .sd-page { box-shadow: none !important; }
    }
    .sd-page {
        background: #fff;
        font-family: Arial, sans-serif;
        font-size: 13px;
    }
    @media print {
        .sd-page {
            width: 210mm;
            min-height: 297mm;
            padding: 12mm 14mm;
            box-sizing: border-box;
        }
    }
    .sd-card {
        background: #fff;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
        overflow: hidden;
        margin-top: 10px;
    }
    .sd-img-section {
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }
    .sd-img-tile {
        display: inline-block;
        text-align: center;
        vertical-align: bottom;
        margin: 0 40px;
    }
    .sd-img-tile img {
        display: block;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .sd-img-tile-label {
        font-size: 11px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 10px;
        display: block;
    }
    #student-details-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    #student-details-table tr.header-row {
        display: none;
    }
    #student-details-table tr:nth-child(odd) {
        background: #fff;
    }
    #student-details-table tr:nth-child(even) {
        background: #f5f7fa;
    }
    #student-details-table td {
        padding: 10px 14px;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: top;
        color: #000;
        font-weight: 400;
    }
    #student-details-table td:first-child {
        width: 35%;
        border-right: 1px solid #e8e8e8;
    }
    #student-details-table tr:last-child td {
        border-bottom: none;
    }
</style>

<div class="sd-page">
<div class="sd-card">

    <div style="text-align:center;padding:10px 16px 8px;border-bottom:1px solid #f0f0f0;">
        {% if college.isHeaderEnabled %}
            <img src="{{ college.collegeHeader }}" style="max-width:100%;max-height:130px;">
        {% else %}
            <img src="{{ college.collageLogo }}" style="max-height:80px;margin-bottom:6px;"><br>
            <div style="font-size:20px;font-weight:700;line-height:1.3;">{{ college.collegeName }}</div>
            <div style="font-size:13px;color:#555;">{{ college.place }}</div>
        {% endif %}
    </div>

    {% if student.myImage or student.studentSignImage %}
    <div class="sd-img-section">
        {% if student.myImage %}
        <div class="sd-img-tile">
            <img src="{{ student.myImage }}" width="110" height="135" alt="Photo" style="object-fit:cover;">
            <span class="sd-img-tile-label">Photo</span>
        </div>
        {% endif %}
        {% if student.studentSignImage %}
        <div class="sd-img-tile">
            <img src="{{ student.studentSignImage }}" width="190" height="75" alt="Signature" style="object-fit:contain;background:#fafafa;padding:4px;">
            <span class="sd-img-tile-label">Signature</span>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <table id="student-details-table">
        <tr class="header-row">
            <td colspan="2" data-f-bold="true" data-a-h="center" data-f-sz="16">{{ college.collegeName }}</td>
        </tr>
        <tr class="header-row">
            <td colspan="2" data-a-h="center" data-f-sz="11">{{ college.place }}</td>
        </tr>
        <tr class="header-row">
            <td colspan="2" data-f-bold="true" data-a-h="center" data-f-sz="14">STUDENT DETAILS</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>{{ student.name }}</td>
        </tr>
        <tr>
            <td>Previous batch(s) of student</td>
            <td>{{ student.previousBatches }}</td>
        </tr>
        <tr>
            <td>Current batch</td>
            <td>{{ student.groupName }}</td>
        </tr>
        <tr>
            <td>Account</td>
            <td>{{ student.studentAccount }}</td>
        </tr>
        <tr>
            <td>University Reg.No.</td>
            <td>{{ student.regNo }}</td>
        </tr>
        <tr>
            <td>Admission date</td>
            <td>{{ student.studentJoindate|date("d-m-Y") }}</td>
        </tr>
        <tr>
            <td>Student Email</td>
            <td>{{ student.studentEmail }}</td>
        </tr>
        <tr>
            <td>Birthday</td>
            <td>{{ student.studentBirthday }}</td>
        </tr>
        <tr>
            <td>Parent Address</td>
            <td>{{ student.parentAddress1 }}<br>{{ student.parentAddress2 }}<br>{{ student.parentCity }}<br>{{ student.parentState }}<br>{{ student.parentCountry }}<br>{{ student.parentZipCode }}</td>
        </tr>
        <tr>
            <td>Student Phone (MOB)</td>
            <td>{{ student.studentPhone }}</td>
        </tr>
        <tr>
            <td>Parent Phone (MOB)</td>
            <td>{{ student.parentPhone }}</td>
        </tr>
        <tr>
            <td>Gender</td>
            <td>{{ student.studentGender }}</td>
        </tr>
        <tr>
            <td>SSLC</td>
            <td>{{ student.sslc }}</td>
        </tr>
        <tr>
            <td>Plustwo</td>
            <td>{{ student.plusTwo }}</td>
        </tr>
        <tr>
            <td>Availed Hostel Facility</td>
            <td>{{ student.hosteller_status }}</td>
        </tr>
        <tr>
            <td>Availed Bus Facility</td>
            <td>{{ student.busroute }}</td>
        </tr>
        <tr>
            <td>Religion</td>
            <td>{{ student.religionName }}</td>
        </tr>
        <tr>
            <td>Category</td>
            <td>{{ student.reservationName }}</td>
        </tr>
        <tr>
            <td>Mother Tongue</td>
            <td>{{ student.motherTongue }}</td>
        </tr>
        <tr>
            <td>Nationality</td>
            <td>{{ student.nationalityName }}</td>
        </tr>
        <tr>
            <td>Second language</td>
            <td>{{ student.secondLangaugeName }}</td>
        </tr>
        <tr>
            <td>Extra-Curricular Activities</td>
            <td>{{ student.extraAcitivites }}</td>
        </tr>
        <tr>
            <td>Father's Name</td>
            <td>{{ student.studentFather }}</td>
        </tr>
        <tr>
            <td>Father's Occupation</td>
            <td>{{ student.parentOccupation }}</td>
        </tr>
        <tr>
            <td>Father's Annual Income</td>
            <td>{{ student.fatherIncome }}</td>
        </tr>
        <tr>
            <td>Father's E-mail</td>
            <td>{{ student.fatherEmail }}</td>
        </tr>
        <tr>
            <td>Mother's Name</td>
            <td>{{ student.studentMother }}</td>
        </tr>
        <tr>
            <td>Mother's Occupation</td>
            <td>{{ student.motherOccupation }}</td>
        </tr>
        <tr>
            <td>Mother's Annual Income</td>
            <td>{{ student.motherIncome }}</td>
        </tr>
        <tr>
            <td>Mother's E-mail</td>
            <td>{{ student.motherEmail }}</td>
        </tr>
        <tr>
            <td>Permanent Address</td>
            <td>{{ student.permahouse }}<br>{{ student.permanentCity }}<br>{{ student.permanentAddress1 }}<br>{{ student.permanentAddress2 }}<br>{{ student.permanentDistrict }}<br>{{ student.permanentState }}<br>{{ student.permanentCountry }}<br>{{ student.permanentZipCode }}</td>
        </tr>
        <tr>
            <td>Current Address</td>
            <td>{{ student.studentAddress|replace({'\\\\\\\\n': '<br>'})|raw }}</td>
        </tr>
        <tr>
            <td>College</td>
            <td>{{ college.collegeName }}</td>
        </tr>
        <tr>
            <td>APAAR ID</td>
            <td>{{ student.abcId }}</td>
        </tr>
        <tr>
            <td>Option/Specialization</td>
            <td>{{ student.specializationName }}</td>
        </tr>
        <tr>
            <td>Programme</td>
            <td>{{ student.programName }}</td>
        </tr>
    </table>

</div>
</div>
