{% extends "base.html" %}
{% block content %}
<div class="converter-wrapper">
    <div class="text-center mb-4">
        <h1>Unit Converter</h1>
        <p class="text-muted">A modern, fast, and free engineering unit converter.</p>
    </div>

    <form method="post" action="{% url 'index' %}">
        {% csrf_token %}
        <div class="row g-3 align-items-end">
            <!-- Input Value -->
            <div class="col-md-12">
                <label for="value_in" class="form-label">Value</label>
                <input type="text" class="form-control" id="value_in" name="value_in" placeholder="Enter a value" value="{{ value_in|default:'' }}" required>
            </div>

            <!-- From Unit -->
            <div class="col-md-6">
                <label for="unit_in" class="form-label">From</label>
                <select class="form-select" id="unit_in" name="unit_in">
                    {% for category, unit_list in units.items %}
                        <optgroup label="{{ category }}">
                            {% for unit in unit_list %}
                                <option value="{{ unit }}" {% if unit == unit_in %}selected{% endif %}>{{ unit|title }}</option>
                            {% endfor %}
                        </optgroup>
                    {% endfor %}
                </select>
            </div>

            <!-- To Unit -->
            <div class="col-md-6">
                <label for="unit_out" class="form-label">To</label>
                <select class="form-select" id="unit_out" name="unit_out">
                    {% for category, unit_list in units.items %}
                        <optgroup label="{{ category }}">
                            {% for unit in unit_list %}
                                <option value="{{ unit }}" {% if unit == unit_out %}selected{% endif %}>{{ unit|title }}</option>
                            {% endfor %}
                        </optgroup>
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="d-grid mt-4">
            <button type="submit" class="btn btn-convert">Convert</button>
        </div>
    </form>

    {% if result is not None %}
        <div class="result-box">
            {{ result }}
        </div>
    {% endif %}

    {% if error %}
        <div class="error-box text-center">
            {{ error }}
        </div>
    {% endif %}

</div>
{% endblock %}
