{% extends 'base.html.twig' %}
{% block title %}Hymn Composer List!{% endblock %}
{% block pageId %}composers_info{% endblock %}
{% block body %}
<div class="card">
<h2 class="card-header page-title" title="authors">Hymn Composers</h2>
<div id="accordion" class="accordion">
<div class="card">
{%
set currFL = composers[0].Fullname|upper|slice(0, 1)
%}
{%
if currFL is same as('(')
%}
<div class="hymn-list-header" id="headingSymbol">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapseSymbol" aria-expanded="true"
aria-controls="collapseSymbol"><span class="h4 m-0">{{ currFL }}</span></button>
</div>
<div id="collapseSymbol" class="collapse" aria-labelledby="headingSymbol" data-parent="#accordion">
{%
else
%}
<div class="hymn-list-header" id="heading{{ currFL }}">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse{{ currFL }}" aria-expanded="true"
aria-controls="collapse{{ currFL }}">
<span class="h4 m-0">{{ currFL }}</span>
</button>
</div>
<div id="collapseA" class="collapse" aria-labelledby="heading{{ currFL }}" data-parent="#accordion">
{%
endif
%}
{% for composer in composers %}
{% if(currFL < composer.Fullname|slice(0, 1)|upper) %}
{% set currFL = composer.Fullname|slice(0, 1)|upper %}
</div>
</div>
<div class="card">
<div class="hymn-list-header" id="heading{{ currFL }}">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse{{ currFL }}" aria-expanded="true"
aria-controls="collapse{{ currFL }}">
<span class="h4 m-0">{{ currFL }}</span>
</button>
</div>
<div id="collapse{{ currFL }}" class="collapse" aria-labelledby="heading{{ currFL }}"
data-parent="#accordion">
{% endif %}
<a class="hymn-info-link"
href="{{ path('authcomp', {'type': 'Composer', 'id': composer.Id} ) }}">{{ composer.Fullname }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}