{% extends "layout.html" %}

{% block title %}OptiWarm - {{ title }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="fas fa-cogs mr-2"></i>{{ title }}
    </h1>
    <a href="{{ url_for('settings.edit') }}" class="btn btn-primary">
        <i class="fas fa-edit mr-2"></i>Edit Configuration
    </a>
</div>

<div class="card mb-4">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <i class="fas fa-network-wired mr-2"></i>MQTT Configuration
        </h5>
    </div>
    <div class="card-body">
        {% if conf %}
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th width="30%">Broker Address</th>
                            <td>{{ conf.mqtt_addr }}</td>
                        </tr>
                        <tr>
                            <th>Base Topic</th>
                            <td>{{ conf.mqtt_topic }}</td>
                        </tr>
                        <tr>
                            <th>Username</th>
                            <td>{{ conf.mqtt_user if conf.mqtt_user else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>Password</th>
                            <td>{{ "●●●●●●●●" if conf.mqtt_password else "Not set" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle mr-2"></i>MQTT configuration has not been set up yet.
                <a href="{{ url_for('settings.edit') }}" class="alert-link">Configure now</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="card mb-4">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <i class="fas fa-envelope mr-2"></i>Email Configuration
        </h5>
    </div>
    <div class="card-body">
        {% if conf and (conf.email_from or conf.email_to or conf.email_srv) %}
            <div class="table-responsive">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th width="30%">From Address</th>
                            <td>{{ conf.email_from if conf.email_from else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>To Address</th>
                            <td>{{ conf.email_to if conf.email_to else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>SMTP Server</th>
                            <td>{{ conf.email_srv if conf.email_srv else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>Username</th>
                            <td>{{ conf.email_user if conf.email_user else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>Password</th>
                            <td>{{ "●●●●●●●●" if conf.email_password else "Not set" }}</td>
                        </tr>
                        <tr>
                            <th>Default Subject</th>
                            <td>{{ conf.email_subject if conf.email_subject else "Not set" }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle mr-2"></i>Email configuration has not been set up yet.
                <a href="{{ url_for('settings.edit') }}" class="alert-link">Configure now</a>
            </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <i class="fas fa-history mr-2"></i>Data Retention Settings
        </h5>
    </div>
    <div class="card-body">
        {% if conf %}
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Data Type</th>
                            <th>Retention Period</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Fuel Cost History</td>
                            <td>{{ conf.keep_fuelcost_day }} days {% if conf.keep_fuelcost_day == 0 %}(Keep indefinitely){% endif %}</td>
                        </tr>
                        <tr>
                            <td>Boiler History</td>
                            <td>{{ conf.keep_boilerhistory_day }} days {% if conf.keep_boilerhistory_day == 0 %}(Keep indefinitely){% endif %}</td>
                        </tr>
                        <tr>
                            <td>Boiler Plan History</td>
                            <td>{{ conf.keep_boilerplan_day }} days {% if conf.keep_boilerplan_day == 0 %}(Keep indefinitely){% endif %}</td>
                        </tr>
                        <tr>
                            <td>Sensor Reading History</td>
                            <td>{{ conf.keep_sensor_history_day }} days {% if conf.keep_sensor_history_day == 0 %}(Keep indefinitely){% endif %}</td>
                        </tr>
                        <tr>
                            <td>Warming Event History</td>
                            <td>{{ conf.keep_warm_event_day }} days {% if conf.keep_warm_event_day == 0 %}(Keep indefinitely){% endif %}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle mr-2"></i>Data retention settings have not been configured yet.
                <a href="{{ url_for('settings.edit') }}" class="alert-link">Configure now</a>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}