{% extends 'App/_include/_layout.main.html.twig' %}
{% block page_content %}
<div class="cell small-12">
    <div class="grid-x header_title_and_action">
        <div class="cell small-12  medium-auto header_title text-center">
            <h1>{{ page_support.h1 }}</h1>
        </div>
    </div>
</div>
<div class="cell small-12">
    <div class="grid-x grid-padding-x  align-center">
        <div class="cell small-12 medium-9 large-7">
            {{ page_support.homeText|raw }}
        </div>
        <div class="cell small-12 medium-9 large-7">
            <h3>{{ 'support.form.title'|trans }}</h3>
            {{ form_start(form_support, {'attr':{'id':'formSupport','class':'grid-x grid-padding-x'}}) }}
            <div class="cell small-12 medium-9">
                {{ form_row(form_support.subject) }}
            </div>
            <div class="cell small-12 medium-3">
                {{ form_row(form_support.severity) }}
            </div>
            <div class="cell small-12">
                {{ form_row(form_support.message) }}
            </div>
            <div class="cell small-4">
                {{ form_label(form_support.attachment) }}
                {{ form_widget(form_support.attachment) }}
            </div>
            <div id="file_name" class="cell small-8 text-azur"></div>
            <div class="cell small-12 text-right">
                <button type="submit" class="button small red">
                    <i class="fa fa-send"></i> {{ 'send'|trans }}
                </button>
            </div>
            {{ form_end(form_support) }}
        </div>
        {% if is_granted('ROLE_APP_SUB_SUPPORT_TEL') %}
        <div class="cell small-12 medium-9 large-7">
            <hr class="mt-1 mb-1">
            {{ page_support.body|raw }}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            let div_file_name = $('#file_name'),
                input_file = $('#support_attachment');

            {# input file events #}
            $(input_file).change(function () {
                $(div_file_name).html(getFileFromFullPath(this.value));
                {# todo manage file type and max size #}
            });

            {# Extract filename from fullpath #}
            function getFileFromFullPath(fullpath) {
                if (!fullpath) return null;
                let startIndex = fullpath.indexOf('\\') >= 0 ? fullpath.lastIndexOf('\\') : fullpath.lastIndexOf('/');
                let filename = fullpath.substring(startIndex);
                if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
                    filename = filename.substring(1);
                }
                return filename;
            }
        })
    </script>
{% endblock %}