<div class="rts-location-section section-gap mb-5" id="donation-areas">
<div class="container">
<div class="top-wrap">
<div class="section-title-area section-title-area-inner text-start mb--50">
<h2 class="section-title">Bande erwerben</h2>
</div>
<a class="btn direction-btn btn-customer" href="{{ path('app_frontend_sponsor_list') }}#sponsor-list">
Sponsorenliste <i class="far fa-long-arrow-right ml--5"></i>
</a>
</div>
<div class="row">
<div class="col-12">
<div class="">
<div class="package-wrapper" id="customer-package-{{ customerPackage.id }}">
<div class="row m-0 p-0">
<div class="col-1 m-0 p-0"></div>
<div class="col-10 m-0 p-0">
<div class="row m-0 p-0">
<div class="col-12 m-0 p-0 text-center" id="TOP_TIER_TOP">
{% if sortedAreasArray.TOP_TIER is defined and sortedAreasArray.TOP_TIER.TOP is defined %}
{% set width = 100/sortedAreasArray.TOP_TIER.TOP|length %}
{% for area in sortedAreasArray.TOP_TIER.TOP %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Oberrang #}
{% endif %}
</div>
<div class="col-12 m-0 p-0 text-center" id="MIDDLE_TIER_TOP">
{% if sortedAreasArray.MIDDLE_TIER is defined and sortedAreasArray.MIDDLE_TIER.TOP is defined %}
{% set width = 100/sortedAreasArray.MIDDLE_TIER.TOP|length %}
{% for area in sortedAreasArray.MIDDLE_TIER.TOP %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Mittelrang #}
{% endif %}
</div>
<div class="col-12 m-0 p-0 text-center" id="LOWER_TIER_TOP">
{% if sortedAreasArray.LOWER_TIER is defined and sortedAreasArray.LOWER_TIER.TOP is defined %}
{% set width = 100/sortedAreasArray.LOWER_TIER.TOP|length %}
{% for area in sortedAreasArray.LOWER_TIER.TOP %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Unterrang #}
{% endif %}
</div>
</div>
</div>
<div class="col-1 m-0 p-0"></div>
</div>
<div class="row h-100 m-0 p-0">
<div class="col-1 m-0 p-0">
<div class="row h-100 m-0 p-0">
<div class="col-4 m-0 p-0" id="TOP_TIER_LEFT">
{% if sortedAreasArray.TOP_TIER is defined and sortedAreasArray.TOP_TIER.LEFT is defined %}
{% set height = 100/sortedAreasArray.TOP_TIER.LEFT|length %}
{% for area in sortedAreasArray.TOP_TIER.LEFT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Oberrang</div> #}
{% endif %}
</div>
<div class="col-4 m-0 p-0" id="MIDDLE_TIER_LEFT">
{% if sortedAreasArray.MIDDLE_TIER is defined and sortedAreasArray.MIDDLE_TIER.LEFT is defined %}
{% set height = 100/sortedAreasArray.MIDDLE_TIER.LEFT|length %}
{% for area in sortedAreasArray.MIDDLE_TIER.LEFT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Mittelrang</div> #}
{% endif %}
</div>
<div class="col-4 m-0 p-0 text-center" id="LOWER_TIER_LEFT">
{% if sortedAreasArray.LOWER_TIER is defined and sortedAreasArray.LOWER_TIER.LEFT is defined %}
{% set height = 100/sortedAreasArray.LOWER_TIER.LEFT|length %}
{% for area in sortedAreasArray.LOWER_TIER.LEFT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Unterrang</div> #}
{% endif %}
</div>
</div>
</div>
<div class="col-10 m-0 p-0">
<img src="{{ asset(customerPackage.packageImage.image.src) }}" class="img-fluid" alt="Paket Bild"/>
</div>
<div class="col-1 m-0 p-0">
<div class="row m-0 p-0 h-100">
<div class="col-4 m-0 p-0 text-center" id="LOWER_TIER_RIGHT">
{% if sortedAreasArray.LOWER_TIER is defined and sortedAreasArray.LOWER_TIER.RIGHT is defined %}
{% set height = 100/sortedAreasArray.LOWER_TIER.RIGHT|length %}
{% for area in sortedAreasArray.LOWER_TIER.RIGHT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Unterrang</div> #}
{% endif %}
</div>
<div class="col-4 m-0 p-0 text-center" id="MIDDLE_TIER_RIGHT">
{% if sortedAreasArray.MIDDLE_TIER is defined and sortedAreasArray.MIDDLE_TIER.RIGHT is defined %}
{% set height = 100/sortedAreasArray.MIDDLE_TIER.RIGHT|length %}
{% for area in sortedAreasArray.MIDDLE_TIER.RIGHT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Mittelrang</div> #}
{% endif %}
</div>
<div class="col-4 m-0 p-0 text-center" id="TOP_TIER_RIGHT">
{% if sortedAreasArray.TOP_TIER is defined and sortedAreasArray.TOP_TIER.RIGHT is defined %}
{% set height = 100/sortedAreasArray.TOP_TIER.RIGHT|length %}
{% for area in sortedAreasArray.TOP_TIER.RIGHT %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': false,
'width': height,
'area': area
} %}
{% endfor %}
{% else %}
{# <div class="vertical-text">Oberrang</div> #}
{% endif %}
</div>
</div>
</div>
</div>
<div class="row h-100 m-0 p-0">
<div class="col-1 m-0 p-0"></div>
<div class="col-10 m-0 p-0">
<div class="row m-0 p-0">
<div class="col-12 m-0 p-0 text-center" id="LOWER_TIER_BOTTOM">
{% if sortedAreasArray.LOWER_TIER is defined and sortedAreasArray.LOWER_TIER.BOTTOM is defined %}
{% set width = 100/sortedAreasArray.LOWER_TIER.BOTTOM|length %}
{% for area in sortedAreasArray.LOWER_TIER.BOTTOM %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Unterrang #}
{% endif %}
</div>
<div class="col-12 m-0 p-0 text-center" id="MIDDLE_TIER_BOTTOM">
{% if sortedAreasArray.MIDDLE_TIER is defined and sortedAreasArray.MIDDLE_TIER.BOTTOM is defined %}
{% set width = 100/sortedAreasArray.MIDDLE_TIER.BOTTOM|length %}
{% for area in sortedAreasArray.MIDDLE_TIER.BOTTOM %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Mittelrang #}
{% endif %}
</div>
<div class="col-12 m-0 p-0 text-center" id="TOP_TIER_BOTTOM">
{% if sortedAreasArray.TOP_TIER is defined and sortedAreasArray.TOP_TIER.BOTTOM is defined %}
{% set width = 100/sortedAreasArray.TOP_TIER.BOTTOM|length %}
{% for area in sortedAreasArray.TOP_TIER.BOTTOM %}
{% include 'frontend/index/customer-package/area.html.twig' with {
'horizontal': true,
'width': width,
'area': area
} %}
{% endfor %}
{% else %}
{# Oberrang #}
{% endif %}
</div>
</div>
</div>
<div class="col-1 m-0 p-0"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-3"><div class="p-3 text-light" style="background-color: {{ customerPackage.colorFree|raw }}">Verfügbar</div></div>
<div class="col-md-3"><div class="p-3 text-light" style="background-color: {{ customerPackage.colorReserved|raw }}">Reserviert</div></div>
<div class="col-md-3"><div class="p-3 text-light" style="background-color: {{ customerPackage.colorSold|raw }}">Vergeben</div></div>
<div class="col-md-3"><div class="p-3 text-light" style="background-color: {{ customerPackage.colorBlocked|raw }}">Blockiert</div></div>
</div>
</div>
</div>