{% extends "layout.html" %}

{% block title %}OptiWarm - {% if is_new %}New {% if zone %}Indoor{% else %}Outdoor{% endif %} Sensor{% else %}Edit {{ sensor.name }}{% endif %}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>
        <i class="fas fa-thermometer-half mr-2"></i>{% if is_new %}New {% if zone %}Indoor{% else %}Outdoor{% endif %} Sensor{% else %}Edit {{ sensor.name }}{% endif %}
    </h1>
    <div class="btn-group">
        {% if is_new %}
            {% if zone %}
                <a href="{{ url_for('zones.show', id=zone.zoneid) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Zone
                </a>
            {% else %}
                <a href="{{ url_for('locations.show', id=location.locationid) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Location
                </a>
            {% endif %}
        {% else %}
            {% if sensor.zoneid %}
                <a href="{{ url_for('zones.show', id=sensor.zoneid.zoneid) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Zone
                </a>
            {% else %}
                <a href="{{ url_for('locations.show', id=sensor.locationid.locationid) }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Location
                </a>
            {% endif %}
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        {% if zone %}
        <p>Zone: <strong>{{ zone.name }}</strong></p>
        {% else %}
        <p>Location: <strong>{{ location.name }}</strong></p>
        {% endif %}
    </div>
    <div class="card-body">
        <form method="post">
            {{ form.csrf_token }}
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="name">Name</label>
                    {{ form.name(class="form-control", placeholder="Enter sensor name") }}
                    {% if form.name.errors %}
                        <div class="text-danger">
                            {% for error in form.name.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.name.description }}</small>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="mqtt_path">MQTT Path</label>
                    {{ form.mqtt_path(class="form-control", placeholder="MQTT topic path for sensor data") }}
                    {% if form.mqtt_path.errors %}
                        <div class="text-danger">
                            {% for error in form.mqtt_path.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.mqtt_path.description }}</small>
                </div>
            </div>
            
            <hr>
            <h5>Preprocessing Configuration</h5>
            
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="pp_min">Minimum Value</label>
                    {{ form.pp_min(class="form-control", placeholder="Minimum acceptable value") }}
                    {% if form.pp_min.errors %}
                        <div class="text-danger">
                            {% for error in form.pp_min.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.pp_min.description }}</small>
                </div>
                
                <div class="form-group col-md-6">
                    <label for="pp_max">Maximum Value</label>
                    {{ form.pp_max(class="form-control", placeholder="Maximum acceptable value") }}
                    {% if form.pp_max.errors %}
                        <div class="text-danger">
                            {% for error in form.pp_max.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.pp_max.description }}</small>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="pp_coef">Coefficient</label>
                    {{ form.pp_coef(class="form-control", placeholder="Correction multiplier") }}
                    {% if form.pp_coef.errors %}
                        <div class="text-danger">
                            {% for error in form.pp_coef.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.pp_coef.description }}</small>
                </div>
                
                <div class="form-group col-md-4">
                    <label for="pp_offset">Offset</label>
                    {{ form.pp_offset(class="form-control", placeholder="Correction offset") }}
                    {% if form.pp_offset.errors %}
                        <div class="text-danger">
                            {% for error in form.pp_offset.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.pp_offset.description }}</small>
                </div>
                
                <div class="form-group col-md-4">
                    <label for="pp_tolerance">Tolerance</label>
                    {{ form.pp_tolerance(class="form-control", placeholder="Change tolerance") }}
                    {% if form.pp_tolerance.errors %}
                        <div class="text-danger">
                            {% for error in form.pp_tolerance.errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    <small class="form-text text-muted">{{ form.pp_tolerance.description }}</small>
                </div>
            </div>
            
            <div class="form-group">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-2"></i>{% if is_new %}Create Sensor{% else %}Update Sensor{% endif %}
                </button>
                {% if is_new %}
                    {% if zone %}
                        <a href="{{ url_for('zones.show', id=zone.zoneid) }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    {% else %}
                        <a href="{{ url_for('locations.show', id=location.locationid) }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    {% endif %}
                {% else %}
                    {% if sensor.zoneid %}
                        <a href="{{ url_for('zones.show', id=sensor.zoneid.zoneid) }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    {% else %}
                        <a href="{{ url_for('locations.show', id=sensor.locationid.locationid) }}" class="btn btn-secondary">
                            Cancel
                        </a>
                    {% endif %}
                {% endif %}
            </div>
        </form>
    </div>
</div>

{% if not is_new %}
<div class="card mt-4">
    <div class="card-header bg-light">
        <h5 class="mb-0">Reading History</h5>
    </div>
    <div class="card-body">
        <div id="sensor-readings-chart" style="height: 300px;"></div>
    </div>
</div>
{% endif %}
{% endblock %}