{% extends "modern/base.html" %}

{% block title %}Config - Zebra Day{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Runtime Configuration</h1>
    <p class="page-subtitle">Deployment-scoped service settings for the TapDB-only zebra_day runtime.</p>
</div>

<div class="grid grid-4 mb-xl">
    <div class="stat-card">
        <div class="card-icon primary"><i class="fas fa-building"></i></div>
        <div>
            <div class="stat-value">{{ runtime.lab_count }}</div>
            <div class="stat-label">Labs</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="card-icon success"><i class="fas fa-print"></i></div>
        <div>
            <div class="stat-value">{{ runtime.printer_count }}</div>
            <div class="stat-label">Printers</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="card-icon warning"><i class="fas fa-file-code"></i></div>
        <div>
            <div class="stat-value">{{ runtime.template_count }}</div>
            <div class="stat-label">Templates</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="card-icon info"><i class="fas fa-layer-group"></i></div>
        <div>
            <div class="stat-value">{{ runtime.label_profile_count }}</div>
            <div class="stat-label">Label Profiles</div>
        </div>
    </div>
</div>

<div class="grid grid-2">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Resolved Paths</h3>
        </div>
        <div class="table-container" style="box-shadow:none;">
            <table class="table">
                <tbody>
                    <tr><th>Active Config Path</th><td><code>{{ config_path }}</code></td></tr>
                    <tr><th>Deployment</th><td>{{ deployment_code }}</td></tr>
                    <tr><th>TapDB Config</th><td><code>{{ tapdb_config_path }}</code></td></tr>
                    <tr><th>Logs</th><td><code>{{ request.app.state.settings.logs_dir }}</code></td></tr>
                    <tr><th>Cache</th><td><code>{{ request.app.state.settings.cache_dir }}</code></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Effective Config</h3>
        </div>
        <div class="table-container" style="box-shadow:none;">
            <table class="table">
                <tbody>
                    {% for row in config_rows %}
                    <tr><th>{{ row.label }}</th><td>{{ row.value }}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Operational Links</h3>
    </div>
    <div class="grid grid-3">
        <a href="/api/v1/config" class="action-card" target="_blank">
            <i class="fas fa-sliders"></i>
            <div>
                <strong>Runtime JSON</strong>
                <small class="text-muted d-block">Machine-readable settings summary</small>
            </div>
        </a>
        <a href="/obs_services" class="action-card" target="_blank">
            <i class="fas fa-wave-square"></i>
            <div>
                <strong>Observability</strong>
                <small class="text-muted d-block">Structured service contract endpoints</small>
            </div>
        </a>
        <a href="/docs" class="action-card" target="_blank">
            <i class="fas fa-book-open"></i>
            <div>
                <strong>Docs</strong>
                <small class="text-muted d-block">Interactive API documentation</small>
            </div>
        </a>
    </div>
</div>

{% if labs %}
<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Configured Labs</h3>
    </div>
    <div class="grid grid-4">
        {% for item in labs %}
        <a href="/printers/{{ item }}" class="action-card">
            <i class="fas fa-building"></i>
            <div>
                <strong>{{ item.replace('-', ' ').title() }}</strong>
                <small class="text-muted d-block">{{ item }}</small>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}