{% load i18n static %}
<link rel="stylesheet" href="{% static 'css/plan-selection.css' %}">
<div class="plan-selection"
     data-radio-name="{{ plan_form.compute_plan_assignment.html_name }}"
     data-storage-price-per-gib="{{ storage_plan.price_per_gib|default:0 }}"
     data-per-hour-text="{% trans 'per hour' %}">
    {% if plan_form %}
        <!-- Hidden radio inputs for form submission -->
        <div style="display: none;">
            {% for assignment in plan_form.fields.compute_plan_assignment.queryset %}
                <input class="form-check-input"
                       type="radio"
                       name="{{ plan_form.compute_plan_assignment.html_name }}"
                       id="{{ plan_form.compute_plan_assignment.auto_id }}_{{ forloop.counter0 }}"
                       value="{{ assignment.pk }}"
                       {% if plan_form.compute_plan_assignment.value == assignment.pk|stringformat:"s" or plan_form.fields.compute_plan_assignment.initial == assignment or not plan_form.is_bound and forloop.first %}checked{% endif %}
                       data-memory-limits="{{ assignment.compute_plan.memory_limits }}"
                       data-memory-requests="{{ assignment.compute_plan.memory_requests }}"
                       data-cpu-limits="{{ assignment.compute_plan.cpu_limits }}"
                       data-cpu-requests="{{ assignment.compute_plan.cpu_requests }}"
                       data-plan-name="{{ assignment.compute_plan.name }}"
                       data-plan-sla="{{ assignment.sla }}"
                       data-plan-sla-display="{{ assignment.get_sla_display }}"
                       data-plan-price="{{ assignment.price }}"
                       data-plan-unit="{{ assignment.get_unit_display }}"
                       required>
            {% endfor %}
        </div>
        <div class="plan-dropdown">
            <div class="plan-dropdown-toggle"
                 role="button"
                 tabindex="0"
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 id="plan-dropdown-toggle">
                <div class="plan-content">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="plan-header">
                            <h6 id="selected-plan-name">-</h6>
                            <span class="badge" id="selected-plan-sla">-</span>
                        </div>
                        <div class="d-flex align-items-start gap-3">
                            <div class="text-end">
                                <div class="price-display" id="selected-plan-price">-</div>
                                <div class="text-muted small">
                                    {% trans "per" %} <span id="selected-plan-unit">-</span>
                                </div>
                            </div>
                            <div class="dropdown-arrow text-muted">
                                <i class="bi bi-chevron-down"></i>
                            </div>
                        </div>
                    </div>
                    <div class="plan-specs text-muted small">
                        <i class="bi bi-cpu"></i> <span id="selected-plan-cpu">-</span> {% trans "vCPU" %}
                        <span class="mx-2">•</span>
                        <i class="bi bi-memory"></i> <span id="selected-plan-memory">-</span> {% trans "RAM" %}
                    </div>
                </div>
            </div>
            <div class="plan-dropdown-menu" role="listbox" id="plan-dropdown-menu">
                {% for assignment in plan_form.fields.compute_plan_assignment.queryset %}
                    <div class="plan-option"
                         role="option"
                         data-value="{{ assignment.pk }}"
                         data-plan-name="{{ assignment.compute_plan.name }}"
                         data-plan-sla="{{ assignment.sla }}"
                         data-plan-sla-display="{{ assignment.get_sla_display }}"
                         data-plan-price="{{ assignment.price }}"
                         data-plan-unit="{{ assignment.get_unit_display }}"
                         data-cpu-limits="{{ assignment.compute_plan.cpu_limits }}"
                         data-memory-limits="{{ assignment.compute_plan.memory_limits }}"
                         data-cpu-requests="{{ assignment.compute_plan.cpu_requests }}"
                         data-memory-requests="{{ assignment.compute_plan.memory_requests }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="plan-header">
                                <h6>{{ assignment.compute_plan.name }}</h6>
                                <span class="badge bg-{% if assignment.sla == 'guaranteed' %}success{% else %}secondary{% endif %}">
                                    {{ assignment.get_sla_display }}
                                </span>
                            </div>
                            <div class="text-end">
                                <div class="price-display">CHF {{ assignment.price }}</div>
                                <div class="text-muted small">{% trans "per" %} {{ assignment.get_unit_display }}</div>
                            </div>
                        </div>
                        <div class="plan-specs text-muted small">
                            <i class="bi bi-cpu"></i> {{ assignment.compute_plan.cpu_limits }} {% trans "vCPU" %}
                            <span class="mx-2">•</span>
                            <i class="bi bi-memory"></i> {{ assignment.compute_plan.memory_limits }} {% trans "RAM" %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="storage-card">
            <div class="plan-content">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="d-flex align-items-start gap-3">
                        <div class="storage-icon">
                            <i class="bi bi-hdd"></i>
                        </div>
                        <div class="plan-header">
                            <h6>{% trans "Storage" %}</h6>
                            <span class="text-muted small">{% trans "Billed based on disk usage" %}</span>
                        </div>
                    </div>
                    {% if storage_plan %}
                        <div class="text-end">
                            <div class="price-display">CHF {{ storage_plan.price_per_gib }}</div>
                            <div class="text-muted small">{% trans "per GiB / hour" %}</div>
                        </div>
                    {% else %}
                        <div class="text-end">
                            <span class="badge bg-secondary">{% trans "Included" %}</span>
                        </div>
                    {% endif %}
                </div>
                {% if storage_plan %}<div class="plan-specs text-muted small" id="storage-cost-display"></div>{% endif %}
            </div>
        </div>
    {% else %}
        <div class="alert alert-warning">{% trans "No compute plans available for this service offering." %}</div>
    {% endif %}
</div>
<script defer src="{% static 'js/plan-selection.js' %}"></script>
