{% extends "base.html" %}
{% block content %}
<div class="row g-4">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Konfiguration</h5>

                <div class="mb-3">
                    <label class="form-label">Modell</label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="model" id="model-sub" value="subscription" checked>
                        <label class="btn btn-outline-primary" for="model-sub">Subscription</label>
                        <input type="radio" class="btn-check" name="model" id="model-met" value="metered">
                        <label class="btn btn-outline-primary" for="model-met">Metered</label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Preistyp</label>
                    <select class="form-select" id="pricing-mode">
                        {% for v, label in pricing_modes %}
                        <option value="{{ v }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Subscription-spezifisch -->
                <div id="sub-controls">
                    <div class="mb-3">
                        <label class="form-label">Segment</label>
                        <select class="form-select" id="segment">
                            {% for v, label in segments %}
                            <option value="{{ v }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tier</label>
                        <select class="form-select" id="tier">
                            {% for code, label, _min, _max in subscription_tiers %}
                            <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">Tier richtet sich nach der Anzahl der Mailboxen (EE).</div>
                    </div>
                </div>

                <!-- Metered-spezifisch -->
                <div id="met-controls" class="d-none">
                    <div class="mb-3">
                        <label class="form-label">Commitment-Level</label>
                        <select class="form-select" id="level">
                            {% for code, label in metered_levels %}
                            <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Mengen Subscription -->
                <div id="sub-qty">
                    <hr>
                    <label class="form-label">Mengen (Mailboxen pro Komponente)</label>
                    {% for code, label in subscription_editions %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>
                            {{ label }} <span class="text-muted small">({{ code }})</span>
                            {% if code == "RE" %}<span class="text-muted small">— auto = EE + WE</span>{% endif %}
                        </span>
                        <input type="number" min="0" step="1" value="0"
                               class="form-control form-control-sm qty-input qty-sub"
                               data-edition="{{ code }}"
                               {% if code == "RE" %}readonly tabindex="-1"{% endif %}>
                    </div>
                    {% endfor %}
                    <div class="form-text">Tier richtet sich automatisch nach EE + WE.</div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h5 class="card-title mb-0">Ergebnis</h5>
                    <span class="badge bg-secondary badge-mode" id="result-mode">–</span>
                </div>
                <div id="result-area" class="text-muted">Bitte Mengen eingeben.</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    window.CSRF_TOKEN = "{{ csrf_token() }}";
</script>
<script src="{{ url_for('static', filename='calc.js') }}"></script>
{% endblock %}