{% extends 'base_frontend_new.html.twig' %}
{% block title %}{{ 'provincias'|trans({}, 'FrontendBundle') }}{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('css/frontend/provinces/provinces.css?v=1.0.1') }}">
{% endblock %}
{% block container %}
{% include 'mensajes_new.html.twig' with {'layout': 0} %}
<div class="ui container">
{% for regionId, region in regions %}
{% set provincesWithClubs = region.provinces|filter(province => province.num_clubs > 0) %}
{% if provincesWithClubs|length > 0 %}
<div class="ui segment region">
<h2 class="ui header">
<img src="{{ region.default_logo }}" alt="{{ region.name }}" class="ui medium image">
<span id="regionTitle">{{ region.name }}</span>
</h2>
<div class="ui styled accordion">
{% for provinceId, province in provincesWithClubs %}
<div class="title {% if id == provinceId %}active{% endif %}">
<label class="ui right floated circular blue label">{{ province.num_clubs }}</label>
<i class="dropdown icon"></i>
<span>{{ province.name|default('No name') }}</span>
</div>
<div class="content {% if id == provinceId %}active{% endif %}">
<div class="ui segment province">
<div class="ui four column grid stackable">
{% for club in clubsByProvince[provinceId]['clubs']|default([]) %}
<div class="column">
<a class="ui fluid card provinceClub" href="{{ path('_club', {'id': club.id }) }}">
<div class="content">
<div class="header">{{ club.name }}</div>
<div class="meta">
<span class="date">{{ club.locality }}</span>
</div>
</div>
<div class="extra content">
<i class="phone icon"></i>
{{ club.phone }}
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}
{% block javascripts %}
<script>
$('.accordion').accordion({
selector: {
trigger: '.title'
}
});
</script>
{% endblock %}