{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/experiment.css' }}">
<style>
    .alert-danger {
        display: none;
    }
    .matrix-wrap {
        overflow-x: auto;
    }
    .matrix-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        table-layout: fixed;
    }
    .matrix-table colgroup .col-label {
        width: 28%;
    }
    .matrix-table colgroup .col-radio {
        width: 14.4%;
    }
    .matrix-table thead th {
        padding: 10px 4px 12px;
        text-align: center;
        font-weight: 600;
        font-size: 13px;
        border-bottom: 2px solid #d8e3ef;
        background: #fff;
        vertical-align: bottom;
    }
    .matrix-table thead th:first-child {
        text-align: left;
    }
    .scale-label {
        display: block;
        font-weight: 400;
        font-size: 10px;
        color: #68809a;
    }
    .matrix-table tbody tr {
        border-bottom: 1px solid #e8eff6;
    }
    .matrix-table tbody tr:nth-child(even) {
        background: #f7fafc;
    }
    .matrix-table tbody tr:hover {
        background: #eef3f9;
    }
    .matrix-table td {
        padding: 12px 4px;
        text-align: center;
        vertical-align: middle;
    }
    .matrix-table td:first-child {
        text-align: left;
        padding-left: 2px;
        padding-right: 10px;
        line-height: 1.45;
        color: #2a3a4e;
    }
    .matrix-table td input[type="radio"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #3b6cb5;
        margin: 0;
    }
    .matrix-instruction {
        font-size: 14px;
        color: #52677d;
        margin-bottom: 18px;
        line-height: 1.5;
    }
    .matrix-error {
        background: #fde8e8;
        color: #c41e1e;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-weight: 600;
        display: none;
    }
    .instagram-actions {
        display: flex;
        gap: 14px;
        padding: 10px 16px 0;
    }
    .action-icon {
        color: #262626;
        cursor: pointer;
        transition: transform 0.15s ease;
        width: 24px;
        height: 24px;
    }
    .action-icon:hover {
        transform: scale(1.1);
    }

    .instagram-image {
    width: 100%;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .instagram-image img {
    width: 100%;
    height: auto;
    display: block;
    }

    .instagram-post {
    border-radius: 0;
    }

    .social-caption {
    line-height: 1.3;
    padding-bottom: 12px;
    }

    .matrix-table thead th {
    vertical-align: top;
    }

    .form-group .radio-inline-group,
    .form-group .form-check-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    }
    .form-group .radio-inline-group label,
    .form-group .form-check-inline label {
    font-size: 12px;
    white-space: nowrap;
}
</style>
{{ endblock }}

{{ block content }}
<div class="platform-shell">
    <section class="panel hero-panel">
    <div class="eyebrow">Organization {{ round_number }} of {{ total_rounds }}</div>
    <div class="title-row">
        <div>
            <h1 class="page-heading">{{ org.name }}</h1>
            <p class="lead" style="font-size:1.15rem; color:rgba(245,249,255,0.95);"><strong style="color:#fff;"></strong> {{ org.mission_statement }}</p>
        </div>
    </div>
</section>

    <section class="review-grid" style="grid-template-columns: 400px 1fr;">
        <div class="panel">
            <div class="instagram-shell">
                <div class="instagram-feed-header">
                    <div class="social-card-head">
                        <img class="avatar-dot" src="{{ static profile_image }}" alt="{{ org.name }}">
                        <div>
                            <div class="social-org">{{ org.name }}</div>
                            <div class="social-subtitle">@{{ org.org_id }}</div>
                        </div>
                    </div>
                    <div class="feed-status"></div>
                </div>
                <article class="social-card instagram-post">
                    <div class="instagram-image">
                        <img src="{{ static post_image }}" alt="{{ org.name }}" >
                    </div>
                    <div class="instagram-actions">
                        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                        <svg class="action-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                    </div>
                    <p class="social-caption"><strong>{{ org.name }}</strong> {{ post_caption }} {{ hashtags }}</p>
                </article>
            </div>
        </div>

        <div class="panel sticky-panel" style="max-height: 85vh; overflow-y: auto;">
            <p class="matrix-instruction">
                We would like to get some immediate reactions from you about <strong>{{ org.name }}</strong>, the organization. If you had to say (based on the available amount of information you have), to what extent do you think
<strong>{{ org.name }}</strong>, the organization, is capable of (1, not at all—7, extremely):
            </p>
            <div class="matrix-error" id="matrix-error">Please answer each item before continuing.</div>

            <div class="matrix-wrap">
                <table class="matrix-table">
                    <colgroup>
                        <col class="col-label" style="width:22%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                        <col class="col-radio" style="width:11.1%;">
                    </colgroup>
                    <thead>
                    <tr>
                        <th></th>
                        <th>1<br><span class="scale-label">Not at all</span></th>
                        <th>2<br><span class="scale-label">Very slightly</span></th>
                        <th>3<br><span class="scale-label">Slightly</span></th>
                        <th>4<br><span class="scale-label">Moderately</span></th>
                        <th>5<br><span class="scale-label">Considerably</span></th>
                        <th>6<br><span class="scale-label">Very Much</span></th>
                        <th>7<br><span class="scale-label">Extremely</span></th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>carrying out actions</td>
                            <td><input type="radio" name="action" value="1"></td>
                            <td><input type="radio" name="action" value="2"></td>
                            <td><input type="radio" name="action" value="3"></td>
                            <td><input type="radio" name="action" value="4"></td>
                            <td><input type="radio" name="action" value="5"></td>
                            <td><input type="radio" name="action" value="6"></td>
                            <td><input type="radio" name="action" value="7"></td>
                        </tr>
                        <tr>
                            <td>communicating</td>
                            <td><input type="radio" name="communication" value="1"></td>
                            <td><input type="radio" name="communication" value="2"></td>
                            <td><input type="radio" name="communication" value="3"></td>
                            <td><input type="radio" name="communication" value="4"></td>
                            <td><input type="radio" name="communication" value="5"></td>
                            <td><input type="radio" name="communication" value="6"></td>
                            <td><input type="radio" name="communication" value="7"></td>
                        </tr>
                        <tr>
                            <td>feeling</td>
                            <td><input type="radio" name="feeling" value="1"></td>
                            <td><input type="radio" name="feeling" value="2"></td>
                            <td><input type="radio" name="feeling" value="3"></td>
                            <td><input type="radio" name="feeling" value="4"></td>
                            <td><input type="radio" name="feeling" value="5"></td>
                            <td><input type="radio" name="feeling" value="6"></td>
                            <td><input type="radio" name="feeling" value="7"></td>
                        </tr>
                        <tr>
                            <td>having desires</td>
                            <td><input type="radio" name="desire" value="1"></td>
                            <td><input type="radio" name="desire" value="2"></td>
                            <td><input type="radio" name="desire" value="3"></td>
                            <td><input type="radio" name="desire" value="4"></td>
                            <td><input type="radio" name="desire" value="5"></td>
                            <td><input type="radio" name="desire" value="6"></td>
                            <td><input type="radio" name="desire" value="7"></td>
                        </tr>
                        <tr>
                            <td>experiencing emotions</td>
                            <td><input type="radio" name="emotion_recognition" value="1"></td>
                            <td><input type="radio" name="emotion_recognition" value="2"></td>
                            <td><input type="radio" name="emotion_recognition" value="3"></td>
                            <td><input type="radio" name="emotion_recognition" value="4"></td>
                            <td><input type="radio" name="emotion_recognition" value="5"></td>
                            <td><input type="radio" name="emotion_recognition" value="6"></td>
                            <td><input type="radio" name="emotion_recognition" value="7"></td>
                        </tr>
                        <tr>
                            <td>telling right from wrong</td>
                            <td><input type="radio" name="morality" value="1"></td>
                            <td><input type="radio" name="morality" value="2"></td>
                            <td><input type="radio" name="morality" value="3"></td>
                            <td><input type="radio" name="morality" value="4"></td>
                            <td><input type="radio" name="morality" value="5"></td>
                            <td><input type="radio" name="morality" value="6"></td>
                            <td><input type="radio" name="morality" value="7"></td>
                        </tr>
                        <tr>
                            <td>having personality traits</td>
                            <td><input type="radio" name="personality" value="1"></td>
                            <td><input type="radio" name="personality" value="2"></td>
                            <td><input type="radio" name="personality" value="3"></td>
                            <td><input type="radio" name="personality" value="4"></td>
                            <td><input type="radio" name="personality" value="5"></td>
                            <td><input type="radio" name="personality" value="6"></td>
                            <td><input type="radio" name="personality" value="7"></td>
                        </tr>
                        <tr>
                            <td>planning</td>
                            <td><input type="radio" name="planning" value="1"></td>
                            <td><input type="radio" name="planning" value="2"></td>
                            <td><input type="radio" name="planning" value="3"></td>
                            <td><input type="radio" name="planning" value="4"></td>
                            <td><input type="radio" name="planning" value="5"></td>
                            <td><input type="radio" name="planning" value="6"></td>
                            <td><input type="radio" name="planning" value="7"></td>
                        </tr>
                        <tr>
                            <td>thinking</td>
                            <td><input type="radio" name="thought" value="1"></td>
                            <td><input type="radio" name="thought" value="2"></td>
                            <td><input type="radio" name="thought" value="3"></td>
                            <td><input type="radio" name="thought" value="4"></td>
                            <td><input type="radio" name="thought" value="5"></td>
                            <td><input type="radio" name="thought" value="6"></td>
                            <td><input type="radio" name="thought" value="7"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="margin-top:24px; padding-top:20px; border-top:2px solid #d8e3ef;">
            </div>
    </section>

    </section>

    <section class="panel" style="max-width:900px; margin:0 auto 20px;">
        <div class="section-header">
            <h2>Mission Statement</h2>
        </div>
        <p style="font-size:0.95rem; line-height:1.65; color:#333; margin:0 0 16px;">
            Humanitarian organizations are committed to reducing human suffering and promoting dignity in crisis-affected communities around the world. Their mission is to provide life-saving assistance, foster long-term resilience, and advocate for basic human rights. Whether responding to conflict, natural disasters, or displacement, they work closely with local partners to understand needs on the ground and deliver timely, effective support. Learning and growth are central to the mission of making a meaningful, lasting difference on the lives of those they serve.
        </p>

        <div style="border-top:1px solid #e8eff6; padding-top:20px;">
            <div class="mission-error" id="mission-error" style="background:#fde8e8; color:#c41e1e; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-weight:600; display:none;">
                Please answer both questions before continuing.
            </div>
            <table style="width:100%; border-collapse:collapse; table-layout:fixed;">
            <table class="matrix-table" style="table-layout:fixed; width:100%;">
                <colgroup>
                    <col style="width:0%;">
                    <col style="width:20%;">
                    <col style="width:20%;">
                    <col style="width:20%;">
                    <col style="width:20%;">
                    <col style="width:20%;">
                </colgroup>
                <tbody>
                    <tr>
                        <td colspan="6" style="font-weight:600; color:#333; font-size:0.9rem; padding-bottom:8px;">
                            Based on the social media post, how successful do you believe this initiative would be?
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Not at all successful</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Not very successful</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Somewhat successful</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Mostly successful</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Very successful</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="radio" name="initiative_success" value="1"></td>
                        <td><input type="radio" name="initiative_success" value="2"></td>
                        <td><input type="radio" name="initiative_success" value="3"></td>
                        <td><input type="radio" name="initiative_success" value="4"></td>
                        <td><input type="radio" name="initiative_success" value="5"></td>
                    </tr>
                    <tr>
                        <td colspan="6" style="font-weight:600; color:#333; font-size:0.9rem; padding-top:24px; padding-bottom:8px;">
                            Based on the social media post, please indicate your level of agreement with the following statement: this initiative aligns with the mission of humanitarian organizations described above.
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Strongly disagree</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Disagree</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Neither agree nor disagree</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Agree</td>
                        <td style="font-size:12px; color:#68809a; text-align:center;">Strongly agree</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="radio" name="mission_alignment" value="1"></td>
                        <td><input type="radio" name="mission_alignment" value="2"></td>
                        <td><input type="radio" name="mission_alignment" value="3"></td>
                        <td><input type="radio" name="mission_alignment" value="4"></td>
                        <td><input type="radio" name="mission_alignment" value="5"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <input type="hidden" name="profile_seconds" id="profile-seconds-input">

    <input type="hidden" name="profile_seconds" id="profile-seconds-input">

    <div class="action-row">
        {{ next_button }}
    </div>
</div>
{{ endblock }}

{{ block scripts }}
<script>
    var profileStart = Date.now();

    var fields = [
        "action", "communication", "desire",
        "emotion_recognition", "feeling", "morality", "personality", "planning",
        "thought", "initiative_success", "mission_alignment"
    ];

    // Hide errors when all answered
    document.addEventListener('change', function(e) {
        if (e.target.type === 'radio') {
            var mindFields = [
                "action", "communication", "desire",
                "emotion_recognition", "feeling",
                "morality", "personality", "planning",
                 "thought"
            ];
            var allMindAnswered = true;
            for (var i = 0; i < mindFields.length; i++) {
                if (!document.querySelector('input[name="' + mindFields[i] + '"]:checked')) {
                    allMindAnswered = false;
                    break;
                }
            }
            if (allMindAnswered) {
                var matrixError = document.getElementById('matrix-error');
                if (matrixError) matrixError.style.display = 'none';
            }

            var missionFields = ["initiative_success", "mission_alignment"];
            var allMissionAnswered = true;
            for (var i = 0; i < missionFields.length; i++) {
                if (!document.querySelector('input[name="' + missionFields[i] + '"]:checked')) {
                    allMissionAnswered = false;
                    break;
                }
            }
            if (allMissionAnswered) {
                var missionError = document.getElementById('mission-error');
                if (missionError) missionError.style.display = 'none';
            }
        }
    });

    // Validate on submit
    document.querySelector('form').addEventListener('submit', function(e) {
        var elapsedSeconds = (Date.now() - profileStart) / 1000;
        document.getElementById('profile-seconds-input').value = elapsedSeconds.toFixed(2);

        var mindFields = [
            "action", "communication", "desire",
            "emotion_recognition", "feeling",
            "morality", "personality", "planning", "thought"
        ];

        var missionFields = ["initiative_success", "mission_alignment"];

        var mindMissing = false;
        for (var i = 0; i < mindFields.length; i++) {
            if (!document.querySelector('input[name="' + mindFields[i] + '"]:checked')) {
                mindMissing = true;
                break;
            }
        }

        var missionMissing = false;
        for (var i = 0; i < missionFields.length; i++) {
            if (!document.querySelector('input[name="' + missionFields[i] + '"]:checked')) {
                missionMissing = true;
                break;
            }
        }

        if (mindMissing || missionMissing) {
            e.preventDefault();
            e.stopImmediatePropagation();

            var matrixError = document.getElementById('matrix-error');
            if (matrixError) {
                matrixError.style.display = mindMissing ? 'block' : 'none';
                if (mindMissing) matrixError.scrollIntoView({behavior: 'smooth', block: 'center'});
            }

            var missionError = document.getElementById('mission-error');
            if (missionError) {
                missionError.style.display = missionMissing ? 'block' : 'none';
                if (missionMissing && !mindMissing) missionError.scrollIntoView({behavior: 'smooth', block: 'center'});
            }

            setTimeout(function() {
                var btn = document.querySelector('[type="submit"], .btn-primary, .otree-btn-next');
                if (btn) {
                    btn.disabled = false;
                    btn.classList.remove('disabled');
                }
            }, 100);
            return false;
        }

        // Hide both errors if all answered
        var matrixError = document.getElementById('matrix-error');
        if (matrixError) matrixError.style.display = 'none';
        var missionError = document.getElementById('mission-error');
        if (missionError) missionError.style.display = 'none';
    });

    // Match right panel height to left panel after images load
    window.addEventListener('load', function() {
        var leftPanel = document.querySelector('.review-grid .panel:first-child');
        var rightPanel = document.querySelector('.review-grid .sticky-panel');
        if (leftPanel && rightPanel) {
            rightPanel.style.maxHeight = leftPanel.offsetHeight + 'px';
            rightPanel.style.overflowY = 'auto';
        }
    });

    // Style hashtags blue
    document.querySelectorAll('.social-caption').forEach(function(caption) {
        caption.innerHTML = caption.innerHTML.replace(/(#\w+)/g, '<span style="color: #1e90ff;">$1</span>');
    });
</script>
{{ endblock }}