{% extends "base.html" %}

{% block title %}Dev Tools - Code of Conquest{% endblock %}

{% block extra_head %}
<style>
    .dev-banner {
        background: #dc2626;
        color: white;
        padding: 0.5rem 1rem;
        text-align: center;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .dev-container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 0 1rem;
    }

    .dev-section {
        background: rgba(30, 30, 40, 0.9);
        border: 1px solid #4a4a5a;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .dev-section h2 {
        color: #f59e0b;
        margin-top: 0;
        margin-bottom: 1rem;
        border-bottom: 1px solid #4a4a5a;
        padding-bottom: 0.5rem;
    }

    .dev-link {
        display: block;
        background: #3b82f6;
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 6px;
        text-decoration: none;
        margin-bottom: 0.5rem;
        transition: background 0.2s;
    }

    .dev-link:hover {
        background: #2563eb;
    }

    .dev-link-disabled {
        background: #4a4a5a;
        cursor: not-allowed;
        opacity: 0.6;
    }

    .dev-link small {
        display: block;
        font-size: 0.85rem;
        opacity: 0.8;
        margin-top: 0.25rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dev-banner">
    DEV MODE - Testing Tools (Not available in production)
</div>

<div class="dev-container">
    <h1>Development Testing Tools</h1>

    <div class="dev-section">
        <h2>Story System</h2>
        <a href="{{ url_for('dev.story_hub') }}" class="dev-link">
            Story Gameplay Tester
            <small>Create sessions, test actions, view AI responses</small>
        </a>
    </div>

    <div class="dev-section">
        <h2>Quest System</h2>
        <span class="dev-link dev-link-disabled">
            Quest Tester (Coming Soon)
            <small>Test quest offering, acceptance, and completion</small>
        </span>
    </div>

    <div class="dev-section">
        <h2>API Debug</h2>
        <span class="dev-link dev-link-disabled">
            API Inspector (Coming Soon)
            <small>View raw API requests and responses</small>
        </span>
    </div>

    <div class="dev-section">
        <h2>Quick Links</h2>
        <p style="color: #9ca3af; margin: 0;">
            <strong>API Docs:</strong> <a href="http://localhost:5000/api/v1/docs" target="_blank" style="color: #60a5fa;">localhost:5000/api/v1/docs</a><br>
            <strong>Characters:</strong> <a href="{{ url_for('character_views.list_characters') }}" style="color: #60a5fa;">Character List</a>
        </p>
    </div>
</div>
{% endblock %}