{% extends 'base.html.twig' %}

{% block title %}
    {{ 'lang.support'|trans }}
{% endblock %}

{% block styles %}
{% endblock %}

{% block body %}

    <div class="h-100 w-100 background-color text-color support-container">
        <div class="container">
            <div class="row">
                <div class="col-12 p-5 font-family">
                    <form name="support" method="post">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('createSupport') }}">
                        <div>
                            <h1>{{ 'lang.cumasAccountHelp' | trans }}</h1>
                            <hr>
                        </div>

                        {% if app.user %}
                            <div class="col-9 col-md-5">
                                <div class="input-hide-color-style">
                                    <label for="firstName">{{ 'lang.firstName' | trans }} </label>
                                    <input
                                            type="text"
                                            id="firstName"
                                            class="mb-3 form-control"
                                            name="firstName"
                                            value="{{ app.user.firstName }}"
                                            placeholder="{{ 'lang.firstName' | trans }}"
                                            required
                                            readonly >
                                </div>
                                <div class="input-hide-color-style">
                                    <label for="lastName">{{ 'lang.lastName' | trans }}</label>
                                    <input
                                            type="text"
                                            id="lastName"
                                            class="mb-3 form-control"
                                            name="lastName"
                                            value="{{ app.user.lastName }}"
                                            placeholder="{{ 'lang.lastName' | trans }}"
                                            required
                                            readonly
                                    >
                                </div>
                                <div class="input-hide-color-style">
                                    <label for="email">{{ 'lang.contactEmail' | trans }}</label>
                                    <input
                                            type="email"
                                            id="email"
                                            class="mb-3 form-control"
                                            name="email"
                                            value="{{ app.user.email }}"
                                            placeholder="{{ 'lang.email' | trans }}"
                                            required
                                            readonly
                                    >
                                </div>
                            </div>
                            <div class="col-12 mt-4 input-hide-color-style">
                                <label for="message">{{ 'lang.howCanWeHelp' | trans }}</label>
                                <textarea id="message" class="mb-3 form-control" name="message"
                                          placeholder="{{ 'lang.describeProblem' | trans }}" required></textarea>
                            </div>
                        {% else %}
                            <div class="col-9 col-md-5">
                                <div class="input-hide-color-style">
                                    <label for="firstName">{{ 'lang.firstName' | trans }}</label>
                                    <input type="text" id="firstName" class="mb-3 form-control" name="firstName"
                                           placeholder="{{ 'lang.firstName' | trans }}" required>
                                </div>
                                <div class="input-hide-color-style">
                                    <label for="lastName">{{ 'lang.lastName' | trans }}</label>
                                    <input type="text" id="lastName" class="mb-3 form-control" name="lastName"
                                           placeholder="{{ 'lang.lastName' | trans }}" required>
                                </div>
                                <div class="input-hide-color-style">
                                    <label for="email">{{ 'lang.contactEmail' | trans }}</label>
                                    <input type="email" id="email" class="mb-3 form-control" name="email"
                                           placeholder="{{ 'lang.email' | trans }}" required>
                                </div>
                            </div>
                            <div class="col-12 mt-4 input-hide-color-style">
                                <label for="message">{{ 'lang.howCanWeHelp' | trans }}</label>
                                <textarea id="message" class="mb-3 form-control" name="message"
                                          placeholder="{{ 'lang.describeProblem' | trans }}" required></textarea>
                            </div>
                        {% endif %}


                        <button type="submit"
                                class="button button-gradient border-radius-1 mb-5">{{ 'lang.sendRequest' | trans }}
                        </button>
                    </form>
                    <div class="container container-FAQ background-color text-color mt-5">
                        <h3>FAQ</h3>
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                       data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        {{ 'lang.Question1' | trans }}
                                    </a>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ 'lang.Answer1' | trans }}
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                       data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        {{ 'lang.Question2' | trans }}
                                    </a>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ 'lang.Answer2' | trans }}
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                       data-bs-target="#collapseThree" aria-expanded="false"
                                       aria-controls="collapseThree">
                                        {{ 'lang.Question3' | trans }}
                                    </a>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse"
                                     aria-labelledby="headingThree"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ 'lang.Answer3' | trans }}
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFour">
                                    <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                       data-bs-target="#collapseFour" aria-expanded="false"
                                       aria-controls="collapseFour">
                                        {{ 'lang.Question4' | trans }}
                                    </a>
                                </h2>
                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ 'lang.Answer4' | trans }}
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingFive">
                                    <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                       data-bs-target="#collapseFive" aria-expanded="false"
                                       aria-controls="collapseFive">
                                        {{ 'lang.Question5' | trans }}
                                    </a>
                                </h2>
                                <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
                                     data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        {{ 'lang.Answer5' | trans }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
{% endblock %}