{% 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">{{ t('calc.config') }}</h5>

                <div class="mb-3">
                    <label class="form-label">{{ t('calc.model') }}</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">{{ t('calc.model.subscription') }}</label>
                        <input type="radio" class="btn-check" name="model" id="model-met" value="metered">
                        <label class="btn btn-outline-primary" for="model-met">{{ t('calc.model.metered') }}</label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ t('calc.pricing_mode') }}</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">{{ t('calc.segment') }}</label>
                        <select class="form-select" id="segment">
                            {% for code in segments %}
                            <option value="{{ code }}">{{ t('js.seg.' ~ code) }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ t('calc.end_discount') }}</label>
                        <input type="number" class="form-control" id="end-discount"
                               min="0" max="100" step="0.5" value="0">
                        <div class="form-text">{{ t('calc.end_discount.hint') }}</div>
                    </div>
                </div>

                <!-- Metered-spezifisch -->
                <div id="met-controls" class="d-none">
                    <div class="mb-3">
                        <label class="form-label">{{ t('calc.level') }}</label>
                        <select class="form-select" id="level">
                            {% for code in metered_levels %}
                            <option value="{{ code }}">{{ t('level.' ~ code) }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Mengen Subscription -->
                <div id="sub-qty">
                    <hr>
                    <label class="form-label">{{ t('calc.quantities') }}</label>
                    {% for code, label in subscription_editions %}
                      {% if code == "RE" %}
                      <div class="d-flex justify-content-between align-items-center mb-2">
                          <span class="d-flex align-items-center gap-2">
                              <input type="checkbox" id="replica-enabled" class="form-check-input mt-0">
                              <label for="replica-enabled" class="mb-0">
                                  {{ label }} <span class="text-muted small">(RE) — {{ t('calc.replica.hint') }}</span>
                              </label>
                          </span>
                          <input type="number" min="0" step="1" value="0"
                                 class="form-control form-control-sm qty-input qty-sub"
                                 data-edition="RE" readonly tabindex="-1">
                      </div>
                      {% else %}
                      <div class="d-flex justify-content-between align-items-center mb-2">
                          <span>{{ label }} <span class="text-muted small">({{ code }})</span></span>
                          <input type="number" min="0" step="1" value="0"
                                 class="form-control form-control-sm qty-input qty-sub"
                                 data-edition="{{ code }}">
                      </div>
                      {% endif %}
                    {% endfor %}
                    <div class="form-text">{{ t('calc.tier.hint') }}</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">{{ t('calc.result') }}</h5>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="copy-table" disabled>{{ t('calc.copy') }}</button>
                        <span class="badge bg-secondary badge-mode" id="result-mode">–</span>
                    </div>
                </div>
                <div id="result-area" class="text-muted"></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 %}