<!-- Start::header-element -->
<div class="header-element header-shortcuts-dropdown">
<!-- Start::header-link|dropdown-toggle -->
<a href="javascript:void(0);" class="header-link dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" id="notificationDropdown" aria-expanded="false">
<i class="bx bx-grid-alt header-link-icon"></i>
</a>
<!-- End::header-link|dropdown-toggle -->
<!-- Start::main-header-dropdown -->
<div class="main-header-dropdown header-shortcuts-dropdown dropdown-menu pb-0 dropdown-menu-end" aria-labelledby="notificationDropdown">
<div class="p-3">
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 fs-17 fw-semibold">Zones</p>
</div>
</div>
<div class="dropdown-divider mb-0"></div>
<div class="main-header-shortcuts p-2" id="header-shortcut-scroll">
<div class="row g-2">
{% for club in clubs %}
<div class="col-4">
<a href="{{ path('bo_cm_set_current_bo_club', { 'boClubId' : club.id }) }}">
<div class="text-center p-3 related-app {{ currentBoClub.id == club.id ? 'bg-success-gradient' : '' }}">
<span class="avatar avatar-sm avatar-rounded">
<img src="{{ club.smallLogoUrl }}" alt="">
</span>
<span class="d-block fs-12">{{ club.name }}</span>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{# <div class="p-3 border-top">#}
{# <div class="d-grid">#}
{# <a href="javascript:void(0);" class="btn btn-primary">View All</a>#}
{# </div>#}
{# </div>#}
</div>
<!-- End::main-header-dropdown -->
</div>
<!-- End::header-element -->