{% extends 'base.html' %}
{% block title %}Printable Paper - AutoExamGen{% endblock %}
{% block head %}
    <style>
        body {
            font-family: 'Times New Roman', serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background: white;
            color: #000;
        }
        .paper-header {
            text-align: center;
            border-bottom: 2px solid #000;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .paper-header h1 {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
            text-transform: uppercase;
        }
        .paper-header h3 {
            font-size: 18px;
            margin: 10px 0;
        }
        .paper-header p {
            margin: 5px 0;
            font-size: 14px;
        }
        .instructions {
            text-align: left;
            display: inline-block;
            margin: 10px 0;
        }
        .instructions li {
            margin: 5px 0;
        }
        .section-header {
            background: #f0f0f0;
            border: 1px solid #000;
            padding: 10px;
            margin: 25px 0 15px 0;
            font-weight: bold;
            font-size: 16px;
            text-transform: uppercase;
        }
        .question {
            margin-bottom: 25px;
            padding: 15px 0;
            border-bottom: 1px solid #ddd;
            page-break-inside: avoid;
        }
        .question:last-child {
            border-bottom: none;
        }
        .question-number {
            font-weight: bold;
            font-size: 16px;
        }
        .question-marks {
            float: right;
            font-weight: bold;
            border: 1px solid #000;
            padding: 3px 8px;
            font-size: 12px;
        }
        .question-text {
            margin-top: 5px;
            font-size: 14px;
            clear: both;
        }
        .mcq-options {
            margin-top: 10px;
            padding-left: 20px;
        }
        .mcq-option {
            margin: 8px 0;
            font-size: 14px;
        }
        .answer-space {
            margin-top: 15px;
            border-bottom: 1px dotted #999;
            height: 60px;
        }
        .long-answer-space {
            margin-top: 15px;
            border-bottom: 1px dotted #999;
            height: 120px;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #000;
            font-size: 12px;
        }
        @media print {
            body {
                margin: 0;
                padding: 15px;
            }
            .question {
                page-break-inside: avoid;
            }
            .section-header {
                page-break-after: avoid;
            }
        }
        @page {
            margin: 1in;
            size: A4;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="paper-header">
        <h1>{{ config.exam_name if config.exam_name else 'EXAMINATION QUESTION PAPER' }}</h1>
        <h3>Subject: {{ config.subject_name if config.subject_name else '[Subject Name]' }}</h3>
        <p><strong>Date:</strong> {{ exam_date }} &nbsp;&nbsp;&nbsp; <strong>Time:</strong> {{ display_duration }} minutes &nbsp;&nbsp;&nbsp; <strong>Total Marks:</strong> {{ total_marks }}</p>
        <hr style="border: 1px solid #000; margin: 15px 0;">
        <p><strong>INSTRUCTIONS:</strong></p>
        <ul class="instructions">
            <li>Answer all questions.</li>
            <li>Write clearly and legibly.</li>
            <li>Manage your time effectively.</li>
            {% if config.mcq_questions > 0 %}
            <li>For multiple choice questions, choose the best answer.</li>
            {% endif %}
            <li>Use additional answer sheets if necessary.</li>
        </ul>
    </div>

    <!-- Multiple Choice Questions -->
    {% if config.mcq_questions > 0 and question_paper.mcq_questions %}
    <div class="section-header">
        SECTION A: MULTIPLE CHOICE QUESTIONS (1 mark each)
    </div>
    <p><strong>Choose the best answer for each question. Circle the letter of your choice.</strong></p>
    {% for question in question_paper.mcq_questions %}
    <div class="question">
        <span class="question-marks">[1 mark]</span>
        <span class="question-number">{{ loop.index }}.</span>
        <div class="question-text">
            {{ question.question if question.question else question }}
        </div>
        
        <div class="mcq-options">
            {% if question.options %}
                {% for option in question.options %}
                <div class="mcq-option">
                    <strong>{{ ['A', 'B', 'C', 'D'][loop.index0] }})</strong> {{ option }}
                </div>
                {% endfor %}
            {% else %}
                <div class="mcq-option"><strong>A)</strong> [Option A]</div>
                <div class="mcq-option"><strong>B)</strong> [Option B]</div>
                <div class="mcq-option"><strong>C)</strong> [Option C]</div>
                <div class="mcq-option"><strong>D)</strong> [Option D]</div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    {% endif %}

    <!-- Short Answer Questions -->
    {% if config.short_questions > 0 and question_paper.short_questions %}
    <div class="section-header">
        SECTION B: SHORT ANSWER QUESTIONS ({{ config.short_marks }} marks each)
    </div>
    {% if config.short_or %}
    <p><strong>Answer ALL questions in this section. For each question, answer either Question A or Question B.</strong></p>
    {% else %}
    <p><strong>Answer ALL questions in this section.</strong></p>
    {% endif %}
    {% for item in question_paper.short_questions %}
    {% if config.short_or and (item.a or item.b) %}
    <div class="question">
        <span class="question-marks">[{{ config.short_marks }} marks]</span>
        <span class="question-number">{{ loop.index }}.</span>
        <div class="question-text">
            <div><strong>A)</strong> {{ (item.a.question if item.a.question else item.a) if item.a else '' }}</div>
            {% if item.b %}
            <div class="text-center" style="margin: 8px 0;"><em>OR</em></div>
            <div><strong>B)</strong> {{ (item.b.question if item.b.question else item.b) if item.b else '' }}</div>
            {% endif %}
        </div>
        <div class="answer-space"></div>
    </div>
    {% else %}
    <div class="question">
        <span class="question-marks">[{{ config.short_marks }} marks]</span>
        <span class="question-number">{{ loop.index }}.</span>
        <div class="question-text">
            {{ item.question if item.question else item }}
        </div>
        <div class="answer-space"></div>
    </div>
    {% endif %}
    {% endfor %}
    {% endif %}

    <!-- Long Answer Questions -->
    {% if config.long_questions > 0 and question_paper.long_questions %}
    <div class="section-header">
        SECTION C: LONG ANSWER QUESTIONS ({{ config.long_marks }} marks each)
    </div>
    {% if config.long_attempt %}
    <p><strong>Attempt any {{ config.long_attempt }} out of {{ config.long_questions }} questions.</strong></p>
    {% else %}
    <p><strong>Answer ALL questions in this section.</strong></p>
    {% endif %}
    {% for question in question_paper.long_questions %}
    <div class="question">
        <span class="question-marks">[{{ config.long_marks }} marks]</span>
        <span class="question-number">{{ loop.index }}.</span>
        <div class="question-text">
            {{ question.question if question.question else question }}
        </div>
        <div class="long-answer-space"></div>
        <div class="long-answer-space"></div>
    </div>
    {% endfor %}
    {% endif %}

    <div class="footer">
        <p><strong>*** END OF QUESTION PAPER ***</strong></p>
        <p>Generated on {{ exam_date }} | Total Questions: {{ config.short_questions + config.long_questions + config.mcq_questions }} | Total Marks: {{ total_marks }}</p>
    </div>
{% endblock %}