<!DOCTYPE html>
{% if not tg_session_id %}
<!-- Show note when no session ID is set -->
<div class="card border-warning bg-warning bg-opacity-10 mb-4">
    <div class="card-body">
        <div class="d-flex align-items-start">
            <div class="rounded-circle bg-warning bg-opacity-25 p-2 me-3 d-flex align-items-center justify-content-center"
                style="width: 2.5rem; height: 2.5rem;">
                <i class="bi bi-key text-warning"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-2">Authentication Required</h6>
                <p class="mb-3 text-muted">
                    To {{ action }} your project to TextGrid-{{ instance|capitalize }}, you need a valid Session ID.
                </p>
                <div class="bg-white rounded p-3">
                    <p class="small fw-semibold mb-2">How to get your Session ID:</p>
                    <ol class="small mb-0 ps-3">
                        <li class="mb-1">Go to <a href="{{ get_textgrid_login_url(instance) }}" target="_blank"
                                class="fw-semibold">TextGrid Authentication <i
                                    class="bi bi-box-arrow-up-right small"></i></a> (login via DARIAH-AAI if needed)
                        </li>
                        <li class="mb-1">Click on <strong>"More Details"</strong></li>
                        <li>Copy the <strong>"TgAuth Session ID"</strong> and paste it below</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% elif not is_valid_session %}
<!-- Show note when session ID is invalid -->
<div class="card border-danger bg-danger bg-opacity-10 mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center">
            <div class="rounded-circle bg-danger bg-opacity-25 p-2 me-3 d-flex align-items-center justify-content-center"
                style="width: 2.5rem; height: 2.5rem;">
                <i class="bi bi-exclamation-triangle text-danger"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-1">Session Expired or Invalid</h6>
                <p class="mb-0 text-muted small">
                    Your session has expired or is invalid. Please <a href="{{ get_textgrid_login_url(instance) }}"
                        target="_blank" class="fw-semibold">get a new Session ID <i
                            class="bi bi-box-arrow-up-right small"></i></a> and try again.
                </p>
            </div>
        </div>
    </div>
</div>
{% endif %}