{% extends "hostingpackages/base.html" %}
{% load i18n %}

{% block title %}{{ block.super }} -
    {% blocktranslate with package=hostingpackage.name full_name=customer.get_full_name trimmed %}Choose new Option for
        Hosting Package {{ package }} of Customer {{ full_name }}{% endblocktranslate %}{% endblock title %}

{% block page_title %}{% blocktranslate with package=hostingpackage.name full_name=customer.get_full_name trimmed %}
    Choose new Option for Hosting Package {{ package }} of Customer {{ full_name }}
{% endblocktranslate %}{% endblock page_title %}

{% block content %}
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for label, items in hosting_options %}
            <div class="col">
                <div class="card">
                    <div class="card-header">{{ label }}</div>
                    <ul class="list-group list-group-flush">
                        {% for item, option_type in items %}
                            <li class="list-group-item"><a
                                    href="{% url 'add_hosting_option' package=hostingpackage.id type=option_type optionid=item.id %}"><i
                                    class="bi-plus-circle"></i> {{ item }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}