{{ block title }}
Round {{ round_number }}
{{ endblock }}

{{ block content }}

<style>
.otree-body {
    max-width: 1450px !important;
    width: 96% !important;
}

.container, .container-fluid {
    max-width: 1450px !important;
}

.task-wrapper {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}

.left-panel {
    flex: 0 0 60%;
}

.right-panel {
    flex: 0 0 38%;
}

/* **ADDED: treatment reminder note style** */
.treatment-note {
    background: #f8f9fa;
    border-left: 3px solid #d0d0d0;
    padding: 9px 12px;
    margin-bottom: 14px;
    font-size: 0.98rem;
    line-height: 1.45;
    color: #333;
}
/* **END ADDED** */

.text-box {
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-height: 76vh;
    overflow-y: auto;
}

.text-box h5 {
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 1.2rem;
}

.text-content {
    white-space: pre-line;
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.55;
    margin-bottom: 0;
}

.summary-box {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    margin-bottom: 16px;
}

.summary-box h5 {
    margin-bottom: 10px;
    font-weight: 700;
}

/* **ADDED: word-limit note style** */
.summary-note {
    background: #f8f9fa;
    border-left: 3px solid #d0d0d0;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
}
/* **END ADDED** */

.summary-content {
    background: #fbfbfb;
    border: 1px solid #eeeeee;
    border-radius: 6px;
    padding: 12px;
    min-height: 130px;
    white-space: pre-wrap;
    line-height: 1.5;
}

.empty-summary {
    color: #666;
    font-style: italic;
}

.rating-box {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.rating-box h5 {
    margin-bottom: 12px;
    font-weight: 700;
}

.rating-item {
    border-top: 1px solid #eeeeee;
    padding-top: 14px;
    margin-top: 14px;
}

.rating-item:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.rating-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.rating-desc {
    color: #444;
    margin-bottom: 8px;
    line-height: 1.4;
}

.rating-options {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.rating-options label {
    font-weight: 400;
}

.continue-wrap {
    margin-top: 16px;
    text-align: center;
}

.btn-primary {
    padding: 8px 28px;
    font-size: 1rem;
}

.round-label {
    margin-bottom: 12px;
    font-size: 1rem;
}

@media (max-width: 1100px) {
    .task-wrapper {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        flex: 1 1 100%;
        width: 100%;
    }

    .text-box {
        max-height: none;
    }
}
</style>

<p class="round-label"><strong>Round {{ round_number }} of {{ num_rounds }}</strong></p>

<input type="hidden" name="task_time_spent" id="time_spent_input">

<!-- **ADDED: AI-disclosure reminder note; only shown in AIinfo treatment** -->
{{ if player.treatment == 'AIinfo' }}
    <div class="treatment-note">
       <strong> Participants had access to an embedded Artificial Intelligence (AI) tool
        that could assist them in producing their summaries, but using the tool was optional. </strong>
    </div>
{{ endif }}
<!-- **END ADDED** -->

<div class="task-wrapper">

    <div class="left-panel">
        <div class="text-box">
            <h5>{{ text_title }}</h5>
            <p class="text-content">{{ original_text }}</p>
        </div>
    </div>

    <div class="right-panel">

        <div class="summary-box">
            <h5>Summary to evaluate</h5>

            <div class="summary-content">
                {{ if summary_is_empty }}
                    <span class="empty-summary">The participant submitted an empty summary.</span>
                {{ else }}
                    {{ assigned_summary }}
                {{ endif }}
            </div>
        </div>

        <div class="rating-box">
            <h5>Your evaluation</h5>

            <div class="rating-item">
                <div class="rating-title">Accuracy</div>
                <div class="rating-desc">
                    The summary correctly reflects the key facts, ideas, and intent of the original text.
                </div>

                <div class="rating-options">
                    <label><input type="radio" name="accuracy" value="1" required> 1 = Poor</label>
                    <label><input type="radio" name="accuracy" value="2" required> 2 = Satisfactory</label>
                    <label><input type="radio" name="accuracy" value="3" required> 3 = Outstanding</label>
                </div>
            </div>

            <div class="rating-item">
                <div class="rating-title">Clarity</div>
                <div class="rating-desc">
                    The summary is easy to understand, well-structured, and expressed in straightforward language,
                    avoiding unnecessary complexity.
                </div>

                <div class="rating-options">
                    <label><input type="radio" name="clarity" value="1" required> 1 = Poor</label>
                    <label><input type="radio" name="clarity" value="2" required> 2 = Satisfactory</label>
                    <label><input type="radio" name="clarity" value="3" required> 3 = Outstanding</label>
                </div>
            </div>

            <div class="rating-item">
                <div class="rating-title">Overall Quality</div>
                <div class="rating-desc">
                    The summary effectively captures the most important points in a concise, coherent, and readable way.
                </div>

                <div class="rating-options">
                    <label><input type="radio" name="overall_quality" value="1" required> 1 = Poor</label>
                    <label><input type="radio" name="overall_quality" value="2" required> 2 = Satisfactory</label>
                    <label><input type="radio" name="overall_quality" value="3" required> 3 = Outstanding</label>
                </div>
            </div>

            <div class="continue-wrap">
                <button class="btn btn-primary">Continue</button>
            </div>
        </div>

    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const timeInput = document.getElementById('time_spent_input');
    const startTime = Date.now();

    function updateTimeSpent() {
        const seconds = (Date.now() - startTime) / 1000;
        timeInput.value = seconds.toFixed(3);
    }

    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', updateTimeSpent);
    }

    setInterval(updateTimeSpent, 250);
});
</script>

{{ endblock }}