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



{% block title %}{% trans %}Діамеб Трейд{% endtrans %} |
     {% trans %}
Технічна підтримка
    {% endtrans %}{% endblock %}

{% block body %}

<div class='main-page topPadding'>
    <div class='slide'>
        <div class='support-container'>
            <div class='container'>
                <div class='header'>
                    <h1>
                        <img alt='Ico' src='/images/support-ico.png'>
                        {% trans %}Клієнтська підтримка{% endtrans %}
                    </h1>
                    <div class="new_h5">{% trans %}Якщо у Вас виникло запитання, Ви можете звернутись до відповідного відділу за допомогою он-лайн форми або зателефонувавши{% endtrans %}.</div>
                </div>
                <div class='support-main-block'>
                    <div class='contact-form'>
                        <form name='support' action="{{path('supportSendTicket')}}" method="POST">
                            <div class='line clearfix'>
                                <label for='name'>{% trans %} Ваше iм&rsquo;я {% endtrans %}</label>
                                <input name='support[name]' id='name' type='text' required>
                            </div>
                            <div class='line clearfix'>
                                <label for='mail'>E-mail</label>
                                <input name='support[email]' id='mail' type='text' required  type="email" pattern="[^ @]*@[^ @]*" >
                            </div>
                            <div class='line clearfix'>
                                <label for='support-type'>{% trans %}Оберіть відділ{% endtrans %}</label>
                                <select name='support[department]' id='support-type'>
                                    <option selected value='Відділ продукції'>{% trans %}Відділ продукції{% endtrans %}</option>
                                    <option value='Технічний відділ'>{% trans %}Технічний відділ{% endtrans %}</option>
                                </select>
                            </div>
                            <div class='question'>
                                <label>{% trans %}Ваше запитання{% endtrans %}</label>
                                <textarea name='support[question]' required></textarea>
                            </div>
                            <div class='send'>
                                <input class='link' type='submit' value='{% trans %}Відправити{% endtrans %}'>
                            </div>
                        </form>
                    </div>
                    <div class='support-tabs'>
                        <div class='tab-container' id='tab-container'>
                            <ul class='etabs clearfix'>
                                <li class='tab'>
                                    <a href='#tab-1'>{% trans %}Відділ продукції{% endtrans %}</a>
                                </li>
                                <li class='tab last'>
                                    <a href='#tab-3'>{% trans %}Технічний відділ{% endtrans %}</a>
                                </li>
                            </ul>
                            <div class='panel-container'>
                                <div class='tabs' id='tab-1'>
                                    {% if supportProd|length > 0 %}
                                    <ul class='support-phones'>
                                        {% for key,item in supportProd %}
                                        <li class='line'>
                                            <div class='name'>
                                                <div class="new_h3">{{item.name}}</div>
                                                <div class="new_h4">{{item.category}}</div>
                                            </div>
                                            <ul class='clearfix'>
                                                <li class='phone'>
                                                    <p>{{item.phone}}</p>
                                                </li>
                                                <li class='skype'>
                                                    <p>{{item.skype}}</p>
                                                </li>
                                                <li class='mail'>
                                                    <p><a class="mailto" href="mailto:{{item.email}}">{{item.email}}</a></p>
                                                </li>
                                            </ul>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                    {% endif %}
                                </div>
                                <div class='tabs' id='tab-3'>
                                   {% if supportTech|length > 0 %}
                                    <ul class='support-phones'>
                                        {% for key,item in supportTech %}
                                        <li class='line'>
                                            <div class='name'>
                                                <div class="new_h3">{{item.name}}</div>
                                                <div class="new_h4">{{item.category}}</div>
                                            </div>
                                            <ul class='clearfix'>
                                                <li class='phone'>
                                                    <p>{{item.phone}}</p>
                                                </li>
                                                <li class='skype'>
                                                    <p>{{item.skype}}</p>
                                                </li>
                                                <li class='mail'>
                                                    <p><a class="mailto" href="mailto:{{item.email}}">{{item.email}}</a>
                                                    </p>
                                                </li>
                                            </ul>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}