{% if ajax_render == false %}
    {% set template= "base.html.twig" %}
{% else %}
    {% set template= "blank.html.twig" %}
{% endif %}

    {% extends template %}

{% block body %}
    <!-- ### $App Screen Content ### -->
    <main class='main-content bgc-grey-100'>
        <div id='mainContent'>
            <div class="container-fluid">

                {% include "modules/common/components/info-block.twig" with {
                    text_translation_string   : 'travels.buttons.infoBlock.text.mainDescription',
                    header_translation_string : 'travels.buttons.infoBlock.header'
                } %}

                {# DataTable shopping plans #}
                <div class="row MyTravelIdeas">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-20 mB-20">
                            <div id="accordion">
                                {% for category in categories %}
                                    <div class="accordin-section">
                                        <h3 class="c-grey-900 mB-10">{{ category }}</h3>
                                        <section class="justify-content-around">

                                            <div id="MyTravelsIdeas">
                                                <div class="trash-parent monthly-single-data editable-parent save-parent d-flex flex-column" data-type="MyTravelsIdeas">
                                                    <ul class="justify-content-around">
                                                        {% for idea in all_ideas %}
                                                            {%  if idea.category == category %}
                                                                {% include 'modules/my-travels/components/single-card.html.twig' with {
                                                                    idea: idea
                                                                }%}
                                                            {% endif %}
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>

                                        </section>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {# Form #}
                <div class="row">
                    <div class="col-md-12">
                        <div class="bgc-white bd bdrs-3 p-20 mB-20 d-flex flex-column">
                            <h4 class="c-grey-900 mB-20 align-self-center">{{ 'travels.headers.addIdea' | trans }}</h4>
                            <div class="col-md-6 align-self-center add-record-form">
                                {{ form_start(form_view,{'attr':{'class':'MyTravelsIdeas', 'data-entity':"MyTravelsIdeas"}}) }}
                                {{ form_end(form_view) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock body %}