{% extends "base.html" %}

{% block title %}{{ error }} - MySQL to Sheets Sync{% endblock %}

{% block nav %}
<!-- Simplified nav for error pages -->
<nav>
    <div class="nav-links">
        <a href="/">Dashboard</a>
        <a href="/health">Health</a>
    </div>
</nav>
{% endblock %}

{% block header %}{% endblock %}

{% block content %}
<div style="max-width: 600px; margin: 4rem auto; text-align: center;">
    <div style="font-size: 4rem; margin-bottom: 1rem;">
        {% if error_code %}
        {% if error_code.startswith('DB_') %}
        <span title="Database Error">&#128451;</span>
        {% elif error_code.startswith('SHEETS_') %}
        <span title="Google Sheets Error">&#128196;</span>
        {% elif error_code.startswith('CONFIG_') %}
        <span title="Configuration Error">&#9881;</span>
        {% else %}
        <span>&#9888;&#65039;</span>
        {% endif %}
        {% else %}
        <span>&#9888;&#65039;</span>
        {% endif %}
    </div>

    <h1 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--error);">{{ error }}</h1>

    {% if error_code %}
    <div style="margin-bottom: 1rem;">
        <span class="error-code" style="font-size: 0.875rem; padding: 0.25rem 0.5rem;">{{ error_code }}</span>
        {% if error_category %}
        <span class="error-category error-category-{{ error_category }}" style="font-size: 0.75rem; padding: 0.125rem 0.5rem; margin-left: 0.5rem;">{{ error_category }}</span>
        {% endif %}
    </div>
    {% endif %}

    <p style="color: var(--text-muted); margin-bottom: 1.5rem;">{{ message }}</p>

    {% if remediation %}
    <div class="card" style="text-align: left; margin-bottom: 1.5rem;">
        <h2 style="font-size: 1rem; margin-bottom: 0.5rem;">How to fix this</h2>
        <p style="font-size: 0.875rem; color: var(--text-muted);">{{ remediation }}</p>
    </div>
    {% endif %}

    {% if error_code %}
    <div style="margin-bottom: 1.5rem;">
        <p style="font-size: 0.875rem; color: var(--text-muted);">
            Need more help? See the
            <a href="https://github.com/your-repo/mysql-to-sheets#troubleshooting" style="color: var(--primary);">troubleshooting guide</a>
            or check the <a href="/errors" style="color: var(--primary);">error log</a>.
        </p>
    </div>
    {% endif %}

    <div class="button-group" style="justify-content: center;">
        <a href="/" class="btn btn-primary">Back to Dashboard</a>
        {% if show_retry %}
        <button onclick="location.reload()" class="btn">Retry</button>
        {% endif %}
        <a href="/diagnostics" class="btn">Run Diagnostics</a>
    </div>
</div>
{% endblock %}

{% block scripts %}{% endblock %}