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

{% block title %}Database Status - MOTM Admin{% endblock %}

{% block head %}
{{ super() }}
<style>
    .status-card {
        margin-bottom: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    
    .status-card h3 {
        margin-top: 0;
        color: #333;
    }
    
    .status-item {
        margin-bottom: 10px;
        padding: 10px;
        background-color: white;
        border-radius: 3px;
        border-left: 4px solid #3498db;
    }
    
    .status-item.success {
        border-left-color: #27ae60;
    }
    
    .status-item.error {
        border-left-color: #e74c3c;
    }
    
    .status-item.warning {
        border-left-color: #f39c12;
    }
    
    .status-label {
        font-weight: bold;
        color: #2c3e50;
    }
    
    .status-value {
        color: #7f8c8d;
        word-break: break-all;
    }
    
    .action-buttons {
        margin-top: 30px;
        text-align: center;
    }
    
    .btn {
        margin: 0 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Database Status</h1>
            <p class="lead">Current database configuration and connection status.</p>
            
            <!-- Database Status Card -->
            <div class="status-card">
                <h3>Database Information</h3>
                
                <div class="status-item {{ 'success' if 'Connected' in db_info.connection_status else 'error' }}">
                    <div class="status-label">Connection Status:</div>
                    <div class="status-value">{{ db_info.connection_status }}</div>
                </div>
                
                <div class="status-item">
                    <div class="status-label">Database Type:</div>
                    <div class="status-value">{{ db_info.database_type|title }}</div>
                </div>
                
                <div class="status-item">
                    <div class="status-label">Database URL:</div>
                    <div class="status-value">{{ db_info.database_url }}</div>
                </div>
                
                <div class="status-item">
                    <div class="status-label">Tables Count:</div>
                    <div class="status-value">{{ db_info.table_count }}</div>
                </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="status-card">
                <h3>Quick Actions</h3>
                <div class="action-buttons">
                    <a href="{{ url_for('database_setup') }}" class="btn btn-primary">
                        <i class="glyphicon glyphicon-cog"></i> Database Setup
                    </a>
                    <a href="{{ url_for('motm_admin') }}" class="btn btn-default">
                        <i class="glyphicon glyphicon-arrow-left"></i> Back to MOTM Admin
                    </a>
                </div>
            </div>
            
            <!-- Database Tables Information -->
            {% if db_info.table_count != 'Unknown' and db_info.table_count > 0 %}
            <div class="status-card">
                <h3>Database Tables</h3>
                <p>The database contains {{ db_info.table_count }} tables. The following tables are available:</p>
                <ul>
                    <li><strong>players</strong> - Player information and details</li>
                    <li><strong>clubs</strong> - Hockey club information</li>
                    <li><strong>teams</strong> - Team information and league details</li>
                    <li><strong>match_squad</strong> - Match squad selections</li>
                    <li><strong>hockey_fixtures</strong> - Match fixtures and results</li>
                    <li><strong>admin_settings</strong> - Application configuration</li>
                    <li><strong>motm_votes</strong> - Man of the Match voting data</li>
                    <li><strong>match_comments</strong> - Match comments and feedback</li>
                    <li><strong>hockey_users</strong> - User authentication data</li>
                </ul>
            </div>
            {% endif %}
            
            <!-- Configuration Help -->
            <div class="status-card">
                <h3>Configuration Help</h3>
                <div class="row">
                    <div class="col-md-4">
                        <h4>SQLite</h4>
                        <p>Best for development and small deployments. No server required.</p>
                        <ul>
                            <li>File-based database</li>
                            <li>No installation required</li>
                            <li>Good for testing</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>MySQL/MariaDB</h4>
                        <p>Popular choice for web applications. Good performance and reliability.</p>
                        <ul>
                            <li>Server-based database</li>
                            <li>Good for production</li>
                            <li>Wide hosting support</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h4>PostgreSQL</h4>
                        <p>Advanced features and excellent performance. Great for complex applications.</p>
                        <ul>
                            <li>Advanced SQL features</li>
                            <li>Excellent performance</li>
                            <li>Strong data integrity</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}