{% extends 'base_index.html' %}
{% block title %}Часто задаваемые вопросы{% endblock %}
{% block content %}
    <div class="col">
        <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-lg-12 col-xs-12">
          <h1 class="m-n font-thin h3">
                 <i class="glyphicon glyphicon-question-sign"></i> {% if admin %}Внутренняя Ф@ка{% else %}Помощь в системе{% endif %}
          </h1>
        </div>
      </div>
    </div>
    <div class="wrapper-md">
    {% if a_faqs %}
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false" style="clear: both;">
        {% for i in a_faqs %}
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading{{ i.id }}">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ i.id }}" aria-expanded="false" aria-controls="collapse{{ i.id }}">
                    <img src="{{ i.icon }}" style="    max-height: 20px;
    float: left;
    margin-right: 5px;">
                  {{ i.title }}
                </a>
              </h4>
            </div>
            <div id="collapse{{ i.id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{ i.id }}">
              <div class="panel-body">
                <ul>
                  {% for n in i.answers %}
                      <li><a href="/management/faq/{{ n.id }}">{{ n.question|safe }}</a></li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        {% endfor %}
        </div>
        <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-lg-12 col-xs-12">
          <h1 class="m-n font-thin h3">
             <i class="glyphicon glyphicon-question-sign"></i> {% if admin %}Пользовательская Ф@ка{% endif %}
          </h1>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="col-lg-6" id="1"></div>
    <div class="col-lg-6" id="2"></div>


    {% for i in faqs %}
<script>
             $('#{% cycle '2' '1' %}').append(
                 '<div class="panel b-a" style="overflow: hidden; clear: both;">' +
                           '<div class="panel-heading no-border" style="    background: #ffcd00;font-weight: bold;font-size: 17px;">' +
                             '<img src="{{ i.icon }}" style="margin-right: 10px;max-height: 46px;max-width: 46px;"> {{ i.title }}' +
                           '</div>' +
                   '<div class="item m-l-n-xxs m-r-n-xxs">' +
                     '<div class="bottom wrapper bg-gd-dk text-white" style="width: 100%;padding:0;    position: relative;">' +
                         '<div class="panel-group" id="accordion{{ i.id }}" role="tablist" aria-multiselectable="true" style="margin-bottom: 0;">' +
                             {% for n in i.answers %}
                                 '<div class="panel panel-default" style="margin: 0; border-radius: 0;">' +
                                         '<a data-toggle="collapse" data-parent="#accordion{{ i.id }}" key="{{ i.id }}_{{ forloop.counter }}" ' +
                                            'href="#collapse{{ i.id }}_{{ forloop.counter }}"' +
                                            'aria-expanded="true" style="color: #333;    font-size: 14px;"' +
                                            'aria-controls="collapse{{ i.id }}_{{ forloop.counter }}" onclick="change_faq_vector($(this).attr(\'key\'))">' +
                                     '<div class="panel-heading" role="tab" id="heading{{ i.id }}_{{ forloop.counter }}" style="    font-size: 14px;">' +
                                       '<div class="panel-title" style="    padding: 0 35px;    font-size: 14px;">' +

                                           '<i class="glyphicon glyphicon-chevron-right" name="vector" set="false" id="{{ i.id }}_{{ forloop.counter }}" style="transform: rotate(0deg);transition: 0.25s"></i> {{ n.question|safe }}' +

                                       '</div>' +
                                     '</div>' +
                                             '</a>' +
                                     '<div id="collapse{{ i.id }}_{{ forloop.counter }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ i.id }}_{{ forloop.counter }}">' +
                                       '<div class="panel-body" style="color: #333;    padding: 20px 10%;">' +
                                         '{{ n.answer|safe }}' +
                                       '</div>' +
                                     '</div>' +
                                 '</div>' +
                                 {% endfor %}
                         '</div>' +
                     '</div>' +
                 '</div>' +
                 '</div>'
 )
         </script>
    {% endfor %}
    </div>
    </div>
    {% include 'right_site.html' %}
{% endblock %}
{% block js %}
    <script>
        function change_faq_vector(key) {
            var bl = $('#'+key);
            if (bl.attr('set') == 'true'){
                bl.css('transform', 'rotate(0deg)').attr('set', false);
            } else {
                $('[name=vector][set=true]').css('transform', 'rotate(0deg)').attr('set', false);
                bl.css('transform', 'rotate(90deg)').attr('set', true);
            }

        }
    </script>
{% endblock %}