{% extends "layouts/dashboard.twig" %}

{% block title %}{{ __('system.title') }} - {{ platformName }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('system.title') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ url('admin/system/phpinfo') }}" class="btn btn-sm btn-outline-primary" target="_blank">
                <i class="bi bi-info-circle"></i> {{ __('system.full_php_info') }}
            </a>
        </div>
    </div>
</div>

<div class="row">
    <!-- Application Info -->
    <div class="col-md-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('system.application') }}</h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <th style="width: 40%">{{ __('system.name') }}:</th>
                        <td>{{ info.app.name }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.version') }}:</th>
                        <td>{{ info.app.version }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.environment') }}:</th>
                        <td><span class="badge bg-{{ info.app.env == 'production' ? 'success' : 'warning' }}">{{ info.app.env }}</span></td>
                    </tr>
                    <tr>
                        <th>{{ __('system.debug_mode') }}:</th>
                        <td>
                            {% if info.app.debug %}
                            <span class="badge bg-danger">{{ __('system.enabled') }}</span>
                            {% else %}
                            <span class="badge bg-success">{{ __('system.disabled') }}</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- System Info -->
    <div class="col-md-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('system.server') }}</h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <th style="width: 40%">{{ __('system.os') }}:</th>
                        <td>{{ info.system.os }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.hostname') }}:</th>
                        <td>{{ info.system.hostname }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.software') }}:</th>
                        <td>{{ info.system.server_software }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.timezone') }}:</th>
                        <td>{{ info.system.timezone }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- PHP Info -->
    <div class="col-md-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('system.php_environment') }}</h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <th style="width: 40%">{{ __('system.version') }}:</th>
                        <td>{{ info.php.version }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.sapi') }}:</th>
                        <td>{{ info.php.sapi }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.memory_limit') }}:</th>
                        <td>{{ info.php.memory_limit }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.max_execution_time') }}:</th>
                        <td>{{ info.php.max_execution_time }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.max_upload') }}:</th>
                        <td>{{ info.php.upload_max_filesize }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Database Info -->
    <div class="col-md-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('system.database_header') }}</h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless table-sm">
                    <tr>
                        <th style="width: 40%">{{ __('system.driver') }}:</th>
                        <td>{{ info.database.driver }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.database_version') }}:</th>
                        <td>{{ info.database.version }}</td>
                    </tr>
                    <tr>
                        <th>{{ __('system.database_name') }}:</th>
                        <td>{{ info.database.database }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Disk Info -->
    <div class="col-12 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('system.disk_usage') }}</h6>
            </div>
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <table class="table table-borderless table-sm">
                            <tr>
                                <th style="width: 40%">{{ __('system.total_space') }}:</th>
                                <td>{{ info.disk.total }}</td>
                            </tr>
                            <tr>
                                <th>{{ __('system.used_space') }}:</th>
                                <td>{{ info.disk.used }}</td>
                            </tr>
                            <tr>
                                <th>{{ __('system.free_space') }}:</th>
                                <td>{{ info.disk.free }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-8">
                        {% set percent = (info.disk.used|replace({' GB': '', ' MB': '', ' KB': '', ' B': ''}) / info.disk.total|replace({' GB': '', ' MB': '', ' KB': '', ' B': ''}) * 100)|round(1) %}
                        <!-- Note: The calculation above is very rough and depends on units being same. 
                             Better to pass raw bytes or percentage from controller. 
                             For now, let's just rely on visual estimation or assume controller logic if needed. 
                             Actually, let's just show a simple static bar for 'Used' based on bytes if we had them.
                             Since we formatted bytes in controller, we can't easily calc percentage here without unformatting.
                             Let's skip the progress bar or make it dummy for now. -->
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">{{ __('system.disk_usage_approx') }}</div>
                        </div>
                        <small class="text-muted">{{ __('system.disk_calc_note') }}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}