{{ header }}
<header class="background-white bottom-margin-large" data-info=''>
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large js-header-notifications">
          <span class="text-x-large text-dark">{{ text_heading_title_question }}</span>
          <div class="adm-breadcrumb">
            {% for breadcrumb in breadcrumbs %}
              <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
              <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{% if questions %}
<div id="question-info" class="container-fluid">
    <div class="row center-xs">
      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-x-large text-left">
          <div class="row">
            <div class="col-xs-12">
              <div class="content-box">
                <span class="text-x-large text-dark">{{ questionsInfo.name }}</span>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
              <div class="content-box">
                <span class="text-small text-dark visible-block bottom-margin-small"><a href="{{ questionsInfo.linkml }}" target="_blank" class="text-decoration-none text-primary">#{{ questionsInfo.mercaid }}</a></span>
                <span class="text-small text-gray">{{ text_id_ml }}</span>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
              <div class="content-box">
                <span class="text-small text-dark visible-block bottom-margin-small">{{ questionsInfo.questions }}</span>
                <span class="text-small text-gray">{{ text_questions }}</span>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
              <div class="content-box">
                <span class="text-small text-dark visible-block bottom-margin-small">{{ questionsInfo.answer }}</span>
                <span class="text-small text-gray">{{ text_answered }}</span>
              </div>
            </div>
            <div class="col-xs-6 col-md-3">
              <div class="content-box">
                <span class="text-small text-dark visible-block bottom-margin-small"><a href="{{ questionsInfo.linkprod }}" target="_blank" class="text-decoration-none text-primary">#{{ questionsInfo.product_id }}</a></span>
                <span class="text-small text-gray">{{ tex_id_product }}</span>
              </div>
            </div>
            <!-- <div class="col-xs-12 col-md-6">
              <div class="content-box">
                <label class="field-label">Organizar</label>
                <select class="field-entry field-entry-medium text-medium" name="">
                  <option value="">Últimas perguntas</option>
                </select>
              </div>
            </div> -->
            <div class="padding-medium full-width">
                <hr class="bottom-border-gray full-width">
            </div>

            {% for question in questions %}
            <div class="col-xs-12 rel">
                <div class="row no-space-xs middle-xs js-content-question">
                  <div class="col-xs">
                    <div class="flex between-xs middle-xs">
                      <a href="{{ question.cli_link }}" target="_blank" class="text-small text-primary text-decoration-none">{{ question.cli_nick_pergunta }} ({{ question.cli_address }})</a>
                      {% if question.resposta == '' %}
                        <div class="text-small text-error text-decoration-none cursor-pointer js-question-delete" data-question-id="{{ question.question_id }}" data-url="{{ urlAjax.delete }}">{{ text_del }}</div>
                      {% endif %}
                    </div>
                    <div class="vertical-margin-small">
                      <span class="text-medium text-dark">{{ question.pergunta }}</span>
                      <span class="text-small text-gray">({{ question.data_criacao_pergunta }})</span>
                    </div>
                    {% if question.resposta == '' %}
                      <div class="js-questioning-container">
                        <span class="text-medium text-success cursor-pointer js-questioning" data-question-id="{{ question.question_id }}">{{ text_answer }}</span>
                      </div>
                    {% else %}
                      <div>
                        <span class="text-medium text-gray">{{ question.resposta }}</span>
                        <span class="text-small text-gray">({{ question.data_criacao_resposta }})</span>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
            {% endfor %}

          </div>
        </div>
      </div>
    </div>
    <div class="row center-xs">
        <div class="col-xs-12 col-md-8">
          <div class="adm-pagination flex center-xs" style="flex-direction: column;">
            {{ pagination }}
          </div>
        </div>
      </div>
  </div>
  <form action="{{ url.answer }}" class="js-questioning-form hidden">
    <div class="border-gray">
      <textarea name="question" maxlength="1000" rows="5" class="field-entry field-entry-medium full-width" placeholder="{{ text_placeholder_answer }}" style="border: 0;"></textarea>
      <span class="text-small visible-block text-primary cursor-pointer padding-medium js-save-answers">Salvar resposta</span>
    </div>

    {{ answers }}

    <div class="flex end-xs middle-xs top-margin-small">
      <button type="button" class="btn-default btn-medium btn-white right-margin-small js-questioning-form-cancel">
        <span>{{ text_cancel }}</span>
      </button>
      <button type="submit" class="btn-default btn-medium btn-primary js-btn-send">
        <span>{{ text_send }}</span>
      </button>
    </div>
  </form>
{% else %}
  <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
  </div>
{% endif%}


{{ footer }}