{# templates/location/_mobile_module.html.twig #}
{# Modulo Mobile per visualizzare e controllare la connessione dati del modem SIM7600 #}
{# Parametri: macchina (entity), deviceId (string) #}

<div class="sim7600-mobile-module" data-device-id="{{ deviceId }}" data-machine-id="{{ macchina.id }}">
    
    {# Connection Status Banner #}
    <div class="module-connection-status">
        <div class="connection-indicator offline">
            <i class="fas fa-circle"></i>
            <span class="status-text">{{ 'Checking connection...'|trans }}</span>
        </div>
    </div>

    <div class="row">
        {# Left Column - Modem Info #}
        <div class="col-md-4">
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-sim-card"></i> {{ 'Modem Info'|trans }}</h1>
                    <div class="controls">
                        <a href="#" class="refresh btn-refresh-modem" title="{{ 'Refresh'|trans }}">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </div>
                </div>
                <div class="tile-body modem-info-content">
                    <div class="info-loading">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p>{{ 'Loading...'|trans }}</p>
                    </div>
                    <div class="info-data" style="display: none;">
                        <div class="info-row">
                            <span class="info-label">{{ 'Manufacturer'|trans }}:</span>
                            <span class="info-value" data-field="manufacturer">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">{{ 'Model'|trans }}:</span>
                            <span class="info-value" data-field="model">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">IMEI:</span>
                            <span class="info-value" data-field="imei">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">ICCID:</span>
                            <span class="info-value" data-field="iccid">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">{{ 'Operator'|trans }}:</span>
                            <span class="info-value" data-field="operator">-</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">{{ 'Phone Number'|trans }}:</span>
                            <span class="info-value" data-field="phone_number">-</span>
                        </div>
                    </div>
                    <div class="info-error" style="display: none;">
                        <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                        <p class="error-message"></p>
                    </div>
                </div>
            </section>
        </div>

        {# Center Column - Signal & Network #}
        <div class="col-md-4">
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-signal"></i> {{ 'Signal Quality'|trans }}</h1>
                </div>
                <div class="tile-body signal-info-content">
                    <div class="signal-display">
                        <div class="signal-bars">
                            <div class="bar bar-1"></div>
                            <div class="bar bar-2"></div>
                            <div class="bar bar-3"></div>
                            <div class="bar bar-4"></div>
                            <div class="bar bar-5"></div>
                        </div>
                        <div class="signal-value">
                            <span class="signal-dbm" data-field="signal_dbm">-- dBm</span>
                            <span class="signal-percent" data-field="signal_percent">--%</span>
                        </div>
                    </div>
                    <div class="network-type">
                        <span class="badge badge-network" data-field="network_type">--</span>
                    </div>
                    <div class="signal-details">
                        <div class="detail-row">
                            <span class="detail-label">RSSI:</span>
                            <span class="detail-value" data-field="rssi">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">RSRP:</span>
                            <span class="detail-value" data-field="rsrp">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">RSRQ:</span>
                            <span class="detail-value" data-field="rsrq">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">SINR:</span>
                            <span class="detail-value" data-field="sinr">-</span>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        {# Right Column - Data Connection Control #}
        <div class="col-md-4">
            <section class="tile color transparent-black">
                <div class="tile-header">
                    <h1><i class="fas fa-network-wired"></i> {{ 'Data Connection'|trans }}</h1>
                </div>
                <div class="tile-body data-connection-content">
                    <div class="connection-status-display">
                        <div class="status-icon disconnected">
                            <i class="fas fa-plug"></i>
                        </div>
                        <div class="status-info">
                            <span class="status-label" data-field="data_state">{{ 'Disconnected'|trans }}</span>
                            <span class="status-ip" data-field="ip_address">-</span>
                        </div>
                    </div>
                    
                    <div class="connection-details" style="display: none;">
                        <div class="detail-row">
                            <span class="detail-label">{{ 'Netmask'|trans }}:</span>
                            <span class="detail-value" data-field="netmask">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">{{ 'Gateway'|trans }}:</span>
                            <span class="detail-value" data-field="gateway">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">DNS:</span>
                            <span class="detail-value" data-field="dns">-</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">APN:</span>
                            <span class="detail-value" data-field="apn">-</span>
                        </div>
                    </div>

                    <div class="traffic-stats">
                        <div class="stat-item">
                            <i class="fas fa-arrow-down text-success"></i>
                            <span class="stat-value" data-field="bytes_received">0 B</span>
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-arrow-up text-info"></i>
                            <span class="stat-value" data-field="bytes_sent">0 B</span>
                        </div>
                    </div>

                    <div class="connection-controls">
                        <button class="btn btn-success btn-connect-data" disabled>
                            <i class="fas fa-plug"></i> {{ 'Connect'|trans }}
                        </button>
                        <button class="btn btn-danger btn-disconnect-data" disabled style="display: none;">
                            <i class="fas fa-power-off"></i> {{ 'Disconnect'|trans }}
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </div>

    {# Error/Message Toast #}
    <div class="module-toast" style="display: none;">
        <div class="toast-content">
            <i class="toast-icon"></i>
            <span class="toast-message"></span>
        </div>
    </div>
</div>