{% extends "base.html" %}

{% block extra_head %}
<style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: var(--bg-primary);
    }
    .ldr-text-container {
        max-width: 900px;
        margin: 40px auto;
        padding: 20px;
        background: var(--bg-secondary);
        border-radius: 8px;
        box-shadow: var(--card-shadow);
    }
    .ldr-text-header {
        border-bottom: 2px solid var(--accent-primary);
        padding-bottom: 15px;
        margin-bottom: 25px;
    }
    .ldr-text-header h1 {
        margin: 0 0 10px 0;
        font-size: 28px;
        color: var(--text-primary);
    }
    .ldr-text-meta {
        color: var(--text-muted);
        font-size: 14px;
        margin-bottom: 15px;
    }
    .ldr-text-meta-item {
        display: inline-block;
        margin-right: 20px;
    }
    .ldr-text-actions {
        margin-bottom: 20px;
    }
    .ldr-btn {
        display: inline-block;
        padding: 8px 16px;
        margin-right: 10px;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .ldr-btn-primary {
        background-color: var(--accent-primary);
        color: white;
    }
    .ldr-btn-primary:hover {
        background-color: var(--accent-primary);
        filter: brightness(0.85);
        color: white;
    }
    .ldr-btn-secondary {
        background-color: var(--bg-tertiary);
        color: var(--text-primary);
    }
    .ldr-btn-secondary:hover {
        background-color: var(--bg-tertiary);
        filter: brightness(0.9);
        color: var(--text-primary);
    }
    .ldr-text-content {
        white-space: pre-wrap;
        word-wrap: break-word;
        font-family: inherit;
        line-height: 1.6;
        color: var(--text-primary);
        font-size: 16px;
    }
</style>
{% endblock %}

{% block content %}
<div class="ldr-text-container">
    <div class="ldr-text-header">
        <h1>{{ title }}</h1>
        <div class="ldr-text-meta">
            {% if extraction_method %}
            <span class="ldr-text-meta-item">
                <strong>Extraction Method:</strong> {{ extraction_method }}
            </span>
            {% endif %}
            {% if word_count %}
            <span class="ldr-text-meta-item">
                <strong>Word Count:</strong> {{ "{:,}".format(word_count | int) }}
            </span>
            {% endif %}
        </div>
    </div>

    <div class="ldr-text-actions">
        <a href="/library/document/{{ document_id }}" class="ldr-btn ldr-btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to Document Details
        </a>
        <a href="/library" class="ldr-btn ldr-btn-secondary">
            <i class="fas fa-home"></i> Back to Library
        </a>
    </div>

    <div class="ldr-text-content">{{ text_content }}</div>
</div>
{% endblock %}
