{% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %}

{% block main %}

    {% embed '@theme/embeds/card.html.twig' %}
        {% from "macros/widgets.html.twig" import callout %}
        {% form_theme form 'form/horizontal.html.twig' %}
        {% block box_before %}
            {{ form_start(form) }}
        {% endblock %}
        {% block box_header %}
            <ul class="nav nav-pills card-header-pills" data-bs-toggle="tabs">
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_timesheet') }}" class="nav-link{% if tab == 'timesheet' %} active{% endif %}" role="tab">{{ 'timesheet'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_customer') }}" class="nav-link{% if tab == 'customer' %} active{% endif %}" role="tab">{{ 'customer'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_project') }}" class="nav-link{% if tab == 'project' %} active{% endif %}" role="tab">{{ 'project'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_clockify') }}" class="nav-link{% if tab == 'clockify' %} active{% endif %}" role="tab">Clockify</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_toggl') }}" class="nav-link{% if tab == 'toggl' %} active{% endif %}" role="tab">Toggl</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a href="{{ path('importer_grandtotal') }}" class="nav-link{% if tab == 'grandtotal' %} active{% endif %}" role="tab">{{ 'importer.grandtotal'|trans }}</a>
                </li>
            </ul>
        {% endblock %}
        {% block box_body %}
            <div class="mb-3 row">
                <label class="col-form-label col-sm-2">{{ 'importer.download_examples'|trans }}</label>
                <div class="col-sm-10">
                    {% if tab == 'timesheet' %}
                        <a class="btn" href="{{ path('importer_example_timesheet_csv') }}">CSV</a>
                        <a class="btn" href="{{ path('importer_example_timesheet_json') }}">JSON</a>
                    {% elseif tab == 'customer' %}
                        <a class="btn" href="{{ path('importer_example_customer_csv') }}">CSV</a>
                        <a class="btn" href="{{ path('importer_example_customer_json') }}">JSON</a>
                    {% elseif tab == 'project' %}
                        <a class="btn" href="{{ path('importer_example_project_csv') }}">CSV</a>
                        <a class="btn" href="{{ path('importer_example_project_json') }}">JSON</a>
                    {% elseif tab == 'clockify' %}
                        <a class="btn" href="{{ path('importer_example_clockify') }}">CSV</a>
                    {% elseif tab == 'toggl' %}
                        <a class="btn" href="{{ path('importer_example_toggl') }}">CSV</a>
                    {% elseif tab == 'grandtotal' %}
                        <a class="btn" href="{{ path('importer_example_grandtotal') }}">CSV</a>
                    {% endif %}
                </div>
            </div>

            {{ form_errors(form) }}
            {{ form_row(form.importFile) }}
            {{ form_row(form.delimiter) }}
            {% set preview = form_row(form.preview) %}
            {{ form_rest(form) }}
            {{ preview|raw }}

            {% if tab == 'clockify' %}
                {{ callout('info', 'importer.clockify_info', null, 'details', false) }}
            {% endif %}

        {% endblock %}
        {% block box_after %}
            {{ form_end(form) }}
        {% endblock %}
        {% block box_footer %}
            <button type="submit" class="btn btn-primary">{{ 'upload'|trans }}</button>
        {% endblock %}
    {% endembed %}

    {% if data is not null %}
        {% set importData = data %}
        {% set countErrors = importData.countErrors() %}
        {% set boxtype = countErrors > 0 ? 'danger' : 'success' %}
        {% set headerLength = importData.header|length %}

        {% set statusTrans = '' %}
        {% for status in data.status %}
            {% if not loop.first %}
                {% set statusTrans = statusTrans ~ ', ' %}
            {% endif %}
            {% set statusTrans = statusTrans ~ status %}
        {% endfor %}

        {% if model.preview %}
            {{ widgets.callout('info', 'importer.how_to_upload', null, 'help') }}
            {{ widgets.callout('warning', 'preview'|trans ~ ': ' ~ statusTrans) }}
        {% elseif countErrors > 0 %}
            {{ widgets.callout('warning', statusTrans) }}
        {% else %}
            {{ widgets.callout('success', statusTrans) }}
        {% endif %}

        {% if countErrors > 0 or model.preview %}
            {% embed '@theme/embeds/card.html.twig' with {'boxtype': boxtype} %}
                {% from "macros/widgets.html.twig" import label_boolean %}
                {% block box_title %}{{ (importData.title)|trans }}{% endblock %}
                {% block box_body_class %}p-0 table-responsive{% endblock %}
                {% block box_body %}
                    <table class="table table-striped">
                        <thead>
                            <th>Row</th>
                        {% for header in importData.header %}
                            <th>{{ header }}</th>
                        {% endfor %}
                        </thead>
                        <tbody>
                        {% for row in importData.rows %}
                            {% set hasError = row.hasError() %}
                            {% if countErrors == 0 or hasError %}
                                <tr{% if hasError %} class="text-warning"{% endif %}>
                                    <td>{{ loop.index + 1 }}</td>
                                    {% for key, data in row.data %}
                                        <td>
                                            {% if key == 'Begin' or key == 'End' %}
                                                {{ data|date_time }}
                                            {% elseif key == 'Billable' or key == 'Exported' %}
                                                {{ label_boolean(data) }}
                                            {% elseif key == 'Duration' %}
                                                {{ data|duration }}
                                            {% else %}
                                                {{ data }}
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                                {% if hasError %}
                                <tr class="text-danger">
                                    <td colspan="{{ headerLength + 1 }}">
                                        <ul>
                                            {% for error in row.getErrors() %}
                                                <li>{{ error }}</li>
                                            {% endfor %}
                                        </ul>
                                    </td>
                                </tr>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>
                {% endblock %}
            {% endembed %}
        {% endif %}
    {% endif %}

{% endblock %}