{% extends '@admin/index.twig' %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
    <h1 class="h2">
      <i aria-hidden="true" class="bi bi-chat-right-dots"></i>
      {{ 'adminHeaderComments' | translate }}
    </h1>
  </div>

  <div id="returnMessage"></div>

  <ul class="nav nav-tabs" id="comments" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#faqs-tab-pane" type="button"
              role="tab" aria-controls="home-tab-pane" aria-selected="true">
        {{ 'msgAdminCommentFaqs' | translate }}
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#news-tab-pane" type="button"
              role="tab" aria-controls="news-tab-pane" aria-selected="false">
        {{ 'msgAdminCommentNews' | translate }}
      </button>
    </li>
  </ul>
  <div class="tab-content" id="commentsContent">
    <div class="tab-pane fade show active mt-2" id="faqs-tab-pane" role="tabpanel" aria-labelledby="faqs-tab"
         tabindex="0">
      <form id="pmf-comments-selected-faq" name="pmf-comments-selected-faq" method="post" accept-charset="utf-8">
        <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfToken }}">

        <table class="table table-striped table-hover align-middle border shadow">
          {% for comment in faqComments %}
            <tr id="comments_{{ comment.id }}">
              <td>
                <label>
                  <input type="checkbox" class="form-check-input" id="comments[]" name="comments[]"
                         value="{{ comment.id }}">
                </label>
              </td>
              <td>
                <div class="d-flex align-items-center flex-wrap text-muted mb-md-0 mb-4 small">
                  <div class="border-end pe-3 me-3 mb-2">
                    <i aria-hidden="true" class="bi bi-person"></i>
                    <a href="mailto:{{ comment.email }}">{{ comment.username }}</a>
                  </div>
                  <div class="d-flex mb-2">
                    <div class="d-flex border-end align-items-center pe-3 me-3">
                      <i aria-hidden="true" class="bi bi-calendar-date me-1"></i>
                      {{ comment.date | format_datetime(locale=currentLocale) }}
                    </div>
                    <div class="d-flex align-items-center me-3">
                      <i aria-hidden="true" class="bi bi-chat-dots me-1"></i>
                      <a
                        href="../?action=faq&cat={{ comment.categoryId }}&id={{ comment.recordId }}&artlang={{ currentLocale }}">
                        {{ comment.recordId | faqQuestion | raw }}
                      </a>
                    </div>
                  </div>
                </div>
                {{ comment.comment | striptags }}
              </td>
            </tr>
          {% endfor %}
          <tfoot>
          <tr>
            <td colspan="2">{{ faqCommentsPagination | raw }}</td>
          </tr>
          </tfoot>
        </table>

      </form>
      <div class="text-end">
        <button class="btn btn-danger" id="pmf-button-delete-faq-comments" type="button">
          {{ 'msgDelete' | translate }}
        </button>
      </div>
    </div>
    <div class="tab-pane fade mt-2" id="news-tab-pane" role="tabpanel" aria-labelledby="news-tab" tabindex="0">
      <form id="pmf-comments-selected-news" name="pmf-comments-selected-news" method="post" accept-charset="utf-8">
        <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfToken }}">

        <table class="table table-striped table-hover align-middle border shadow">
          {% for comment in newsComments %}
            <tr id="comments_{{ comment.id }}">
              <td>
                <label>
                  <input type="checkbox" class="form-check-input" id="comments[]" name="comments[]"
                         value="{{ comment.id }}">
                </label>
              </td>
              <td>
                <div class="d-flex align-items-center flex-wrap text-muted mb-md-0 mb-4 small">
                  <div class="border-end pe-3 me-3 mb-2">
                    <i aria-hidden="true" class="bi bi-person"></i>
                    <a href="mailto:{{ comment.email }}">{{ comment.username }}</a>
                  </div>
                  <div class="d-flex mb-2">
                    <div class="d-flex border-end align-items-center pe-3 me-3">
                      <i aria-hidden="true" class="bi bi-calendar-date me-1"></i>
                      {{ comment.date | format_datetime(locale=currentLocale) }}
                    </div>
                    <div class="d-flex align-items-center me-3">
                      <a href="../?action=news&newsid={{ comment.recordId }}&artlang={{ currentLocale }}">
                        <i class="bi bi-newspaper"></i>
                      </a>
                    </div>
                  </div>
                </div>
                {{ comment.comment }}
              </td>
            </tr>
          {% endfor %}
          <tfoot>
          <tr>
            <td colspan="2">{{ newsCommentsPagination | raw }}</td>
          </tr>
          </tfoot>
        </table>

      </form>
      <div class="text-end">
        <button class="btn btn-danger" id="pmf-button-delete-news-comments" type="button">
          {{ 'msgDelete' | translate }}
        </button>
      </div>
    </div>
  </div>
{% endblock %}