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

{% block metakeywords %}{{terms.metakeywords|raw}}{% endblock %}

{% block metadescription %}{{terms.metadescription|raw}}{% endblock %}

{% block title %}{% if app.request.locale == 'uk' %}Умови співпраці | Діамеб{% endif %}{% if app.request.locale == 'ru' %}Условия сотрудничества | Диамеб{% endif %}{% if app.request.locale == 'en' %}Terms of cooperation | Diameb{% endif %}{% endblock %}

{% block body %}

<div class='main-page topPadding'>
  <div class='slide'>
    <div class='about-company-container'>
      <div class='line'></div>
      <div class='about-company-container-inside'>
        <div class='container'>
          <div class='about-page-tabs'>
            <div id='about-page-tabs'>
              <ul class='etabs clearfix'>
                <li class='tab' id='dio'>
                  <a href='#tab-1'>{% trans %}Доставка та оплата{% endtrans %}</a>
                </li>
                <li class='tab' id='remont'>
                  <a href='#tab-2'>{% trans %}Ремонт{% endtrans %}</a>
                </li>
                <li class='tab' id='umovy'>
                  <a href='#tab-3'>{% trans %}Умови гарантії{% endtrans %}</a>
                </li>
                <li class='tab' id='dyleram'>
                  <a href='#tab-4'>{% trans %}Дилерам{% endtrans %}</a>
                </li>
                <li class='tab last' id='support'>
                  <a href='#tab-5'>{% trans %}Підтримка{% endtrans %}</a>
                </li>
              </ul>
              <div class='tabs-content'>
                <div class='tabs' id='tab-1'>               
                  <div class='about-company text-block'>
                    <div class='diameb'>
                        <p>{{terms.d_i_o|raw}}</p>
                    </div>
                  </div>
                </div>
                <div class='tabs' id='tab-2'>
                  <div class='company-mission text-block'>
                     <p>{{terms.remont|raw}}</p>
                     {% if app.request.locale == 'uk' %}<a href="/uk/repair" class="repair_read_more">Читати повністю{% endif %}{% if app.request.locale == 'ru' %}<a href="/ru/repair" class="repair_read_more">Читать полностью{% endif %}{% if app.request.locale == 'en' %}<a href="/en/repair" class="repair_read_more">Read more{% endif %}</a>
                  </div>
                </div>
                <div class='tabs' id='tab-3'>
                  <div class='text-block'>
                    <p>{{terms.garantija|raw}}</p>
                  </div>
                </div>
                <div class='tabs' id='tab-4'>
                  <div class='partners text-block'>
                   <p>{{terms.dyleram|raw}}</p>
                  </div>
                </div>
                <div class='tabs' id='tab-5'>
                  <div class='main-page text-block'>

            <style>
            .support-h1{display:block;font-family:"Russo One",sans-serif;font-size:18px;line-height:18px;color:#203f5c;text-transform:uppercase;margin:15px 0 0}
            .support-tabs ul li{background:none}
            .support-tabs .new_h3{color:#203f5c;font-size:16px;font-weight:700;line-height:32px;margin:0}
            .support-tabs .new_h4{color:#203f5c;font-size:16px;font-weight:400;line-height:16px;margin:0}            
            .support-phones .line ul li{text-align:center;margin-top:30px}
            .support-phones .line ul li.phone p{color:#00a18e}
            .support-phones .line ul li.skype p{color:#43b1f0}
            .mailto{color:#00A18E}
            .support-phones .line{margin-top:20px;border-bottom:1px solid #c9ccd1;padding-bottom:20px;height:auto}
            @media screen and (min-width: 320px) and (max-width:820px) {
            .support-phones .line ul li.phone{background:url(../../bundles/webmilfrontendhomepage/images/phone-ico.png) no-repeat left}
            .support-phones .line ul li.skype{background:url(../../bundles/webmilfrontendhomepage/images/skype-ico.png) no-repeat left}
            .support-phones .line ul li.mail{background:url(../../bundles/webmilfrontendhomepage/images/mail-ico.png) no-repeat left}
            .support-phones .line ul li{width:170px;margin-left:auto;margin-right:auto;height:30px}
            .about-company-container .about-company-container-inside .container .about-page-tabs #about-page-tabs .tabs-content ul.clearfix,div.name{max-width:320px}            
            }
            @media screen and (min-width:821px) {
            .support-phones .line ul li.phone{background:url(../../bundles/webmilfrontendhomepage/images/phone-ico.png) no-repeat top center}
            .support-phones .line ul li.skype{background:url(../../bundles/webmilfrontendhomepage/images/skype-ico.png) no-repeat top center}
            .support-phones .line ul li.mail{background:url(../../bundles/webmilfrontendhomepage/images/mail-ico.png) no-repeat top center}
            .support-phones .line ul li{width:177px}
            .support-phones .line ul li{width:177px;padding-top:30px;float:left}
            }
            </style>
                    <div class='support-tabs'>
                        <div class='tab-container'>
                            <div class='panel-container'>
                                <div class='tabs' id='tab-1'>
                                <div class='support-h1'>{% trans %}Відділ продукції{% endtrans %}</div>
                                    {% if terms.supportProd|length > 0 %}
                                    <ul class='support-phones'>
                                        {% for key,item in terms.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 terms.supportTech|length > 0 %}
                                   <div class='support-h1'>{% trans %}Технічний відділ{% endtrans %}</div>
                                    <ul class='support-phones'>
                                        {% for key,item in terms.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>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}