{% 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' id="jobAfterhoursMainWrapper">
            <div id='mainContent'>
                <div class="container-fluid">

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

                    <div class="row">
                        <div class="col-md-12">
                            <div class="bgc-white bd bdrs-3 p-10 mB-20">

                                 <div data-smart-tab="true">
                                    <ul class="nav">
                                       <li><a class="nav-link" href="#tab-1" id="tab-nav-1">
                                            {{ 'job.afterhours.headers.tabs.madeAfterhours.label' | trans }}
                                       </a></li>
                                       <li><a class="nav-link" href="#tab-2" id="tab-nav-2">
                                            {{ 'job.afterhours.headers.tabs.spentAfterhours.label' | trans }}
                                       </a></li>
                                    </ul>

                                    <div class="tab-content">
                                       <div id="tab-1" class="tab-pane" role="tabpanel">
                                           <div class="bgc-white bdrs-3 p-20 mB-20">
                                               {% include 'modules/my-job/components/afterhours.table.html.twig' with {'afterhours_type':'all', 'afterhours':afterhours_made } %}
                                           </div>
                                       </div>
                                       <div id="tab-2" class="tab-pane" role="tabpanel">
                                           <div class="bgc-white bdrs-3 p-20 mB-20">
                                               {% include 'modules/my-job/components/afterhours.table.html.twig' with {'afterhours_type':'spent', 'afterhours':afterhours_spent } %}
                                           </div>
                                       </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Afterhours summary #}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="bgc-white bd bdrs-3 p-20 mB-20">
                                <h4 class="c-grey-900 mB-20 text-center">{{ 'job.afterhours.headers.remainingAfterhours' | trans }}</h4>
                                {% for goal, remaining_time_to_spent in remaining_time_to_spend_per_goal %}
                                    <section>
                                        <span>{{ 'job.afterhours.summaryPartials.iHaveGot' | trans }} </span> <b class="text-danger">{{ remaining_time_to_spent['timeSummary'] }}  ( {{ roundDownToAny(remaining_time_to_spent['daysSummary'], 0.25) }} {{ "job.afterhours.summaryPartials.days" | trans }} )</b>
                                        <span> {{ 'job.afterhours.summaryPartials.for' | trans }} <b>{{ goal }} </b>{{ "job.afterhours.summaryPartials.leftToSpend" | trans }}</span>
                                    </section>
                                {% endfor %}
                                <h4 class="c-grey-900 mB-20 text-center">{{ 'job.afterhours.headers.summary' | trans }}</h4>
                                <section><span>{{ 'job.afterhours.labels.hours' | trans }}: <b class="text-danger">{{ secondsToTimeFormat(seconds_all) }} </b></span></section>
                                <section><span>{{ 'job.afterhours.labels.days' | trans }}: <b class="text-danger">{{ roundDownToAny(days_all, 0.25) }}</b></span></section>
                                <br>
                                <p class="job-afterhours-asterix"><span class="text-danger">*</span> <span>{{ 'job.afterhours.info.daysAreRounded'|trans|raw }}</span></p>
                            </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">{{ 'job.afterhours.headers.addSpendAfterhours' | trans }}</h4>
                                <div class="col-md-6 align-self-center add-record-form">
                                    {{ form(afterhours_form_view,{'attr':{' data-entity':"MyJobAfterhours"}}) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    {% endblock body %}