{% extends "admin/layout.twig" %}

{% block title %}Administração - Dados do Sistema{% endblock %}

{% block header_title %}Dados do Sistema{% endblock %}

{% block extra_css %}
    .info-card {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    .info-card h3 {
        margin-top: 0;
        color: #2c3e50;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }
    .info-item {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 6px;
        border-left: 4px solid #3498db;
    }
    .info-label {
        font-size: 0.85em;
        color: #7f8c8d;
        text-transform: uppercase;
        margin-bottom: 5px;
    }
    .info-value {
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
    }
    .developer-section {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .developer-logo {
        max-width: 200px;
        flex-shrink: 0;
    }
    .developer-logo img {
        max-width: 100%;
        height: auto;
    }
    .contact-form {
        flex: 1;
        min-width: 300px;
    }
    .success-message {
        background: #d4edda;
        color: #155724;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        border: 1px solid #c3e6cb;
    }
{% endblock %}

{% block content %}
    
    {% if _get.success %}
        <div class="success-message">
            Sua mensagem foi enviada com sucesso para o desenvolvedor.
        </div>
    {% endif %}

    <div class="info-card">
        <h3>Tech Stack</h3>
        <div class="info-grid">
            <div class="info-item">
                <div class="info-label">Versão do App</div>
                <div class="info-value">v{{ app_version }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">Versão do PHP</div>
                <div class="info-value">{{ php_version }}</div>
            </div>
            <div class="info-item">
                <div class="info-label">Versão do PocketBase</div>
                <div class="info-value">{{ pb_version }}</div>
            </div>
        </div>
    </div>

    <div class="info-card">
        <h3>Contato com o Desenvolvedor</h3>
        <div class="developer-section">
            <div class="developer-logo">
                <img src="/images/logo_ectec.png" alt="ECTEC Logo">
                <p style="text-align: center; color: #7f8c8d; font-size: 0.9em; margin-top: 10px;">Desenvolvido por Eduardo Corrêa</p>
            </div>
            
            <div class="contact-form">
                <p>Encontrou um problema ou tem uma sugestão? Envie uma mensagem diretamente para <strong>eduardogcorrea@gmail.com</strong>.</p>
                <form action="/admin/system-info/contact" method="POST">
                    <div class="form-group">
                        <label for="message">Sua Mensagem:</label>
                        <textarea name="message" id="message" rows="5" required placeholder="Descreva aqui o problema, dúvida ou sugestão..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Enviar Mensagem</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}