{% extends "base.html" %}

{% block title %}Research Questions - {{ title }}{% endblock %}

{% block head %}
<style>
:root {
    --hero-bg: {{ background_color }};
    --accent: {{ accent_color }};
}

.page-header {
    background: var(--hero-bg);
    padding: 3rem 0;
    color: white;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.page-header .subtitle {
    opacity: 0.9;
    font-size: 1.1rem;
}

.page-meta {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.content-section {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.intro-text {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-family: Georgia, serif;
}

/* Research questions */
.questions-list {
    list-style: none;
    padding: 0;
    counter-reset: question-counter;
}

.question-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-radius: 8px;
    border-left: 4px solid #ca8a04;
    position: relative;
    counter-increment: question-counter;
}

.question-item::before {
    content: counter(question-counter);
    position: absolute;
    top: 1rem;
    left: -2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #ca8a04;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.question-text {
    color: #713f12;
    line-height: 1.7;
    font-family: Georgia, serif;
    font-size: 1.05rem;
    padding-left: 1rem;
}

/* Methodology note */
.methodology-note {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #64748b;
}

.methodology-note h3 {
    color: #475569;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .question-item::before {
        position: static;
        margin-bottom: 0.5rem;
    }
    
    .question-text {
        padding-left: 0;
    }
}
</style>
{% endblock %}

{% block body %}
<header>
    <div class="container">
        <a href="{{ base_url }}/main.html" class="logo">{{ emoji }} {{ title }}</a>
        <nav>
            <div class="dropdown">
                <button class="dropdown-toggle active">Overview</button>
                <div class="dropdown-menu">
                    <a href="{{ base_url }}/overview/summary.html">📄 Finding Aid</a>
                    <a href="{{ base_url }}/overview/changes.html">🔄 Key Changes</a>
                    <a href="{{ base_url }}/overview/questions.html" class="active">❓ Research Questions</a>
                </div>
            </div>
            {% if enable_browse_dates %}
            <a href="{{ base_url }}/browse/dates.html">Browse by Date</a>
            {% endif %}
            {% if enable_browse_entities %}
            <a href="{{ base_url }}/browse/entities.html">Browse by Entity</a>
            {% endif %}
        </nav>
    </div>
</header>

<section class="page-header">
    <div class="container">
        <h1>❓ Research Questions</h1>
        <p class="subtitle">Scholarly inquiries emerging from {{ summary.document_count }} documents</p>
        <p class="page-meta">Generated {{ summary.generated_at }} using {{ summary.model }}</p>
    </div>
</section>

<main class="page-content" data-pagefind-ignore>
    <section class="content-section">
        <p class="intro-text">
            The following research questions were identified through AI analysis of the document collection. 
            These questions highlight gaps in the historical record, suggest connections to broader contexts, 
            and point toward avenues for further investigation.
        </p>
        
        {% if summary.research_questions %}
        <ol class="questions-list">
            {% for question in summary.research_questions %}
            <li class="question-item">
                <div class="question-text">{{ question }}</div>
            </li>
            {% endfor %}
        </ol>
        
        <div class="methodology-note">
            <h3>📋 About These Questions</h3>
            <p>
                Research questions were generated by analyzing patterns, gaps, and notable details across the 
                document collection. They are intended as starting points for scholarly inquiry and may require 
                additional context or verification.
            </p>
        </div>
        {% else %}
        <p>No research questions generated. Run <code>flatfish summarize</code> to generate them.</p>
        {% endif %}
    </section>
</main>

<footer>
    <div class="container"></div>
</footer>
{% endblock %}