{% extends 'index.twig' %}

{% block richSnippets %}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "{{ question }}",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "{{ answer | striptags }}"
        }
      }
    ]
  }
  </script>
{% endblock %}

{% block content %}
  <div class="row g-5">
    <div class="col-md-8">

      <div class="breadcrumb-wrapper">
        {{ breadcrumb | raw }}
      </div>

      <h2 class="mb-4 border-bottom">{{ question | raw }}</h2>

      <article class="pmf-faq-body pb-4 mb-4 border-bottom">{{ answer|raw }}</article>

      {% if attachmentList is not empty %}
        <p>{{ 'msgAttachedFiles' | translate }}:</p>
        <ul class="pb-4 mb-4 border-bottom">
          {% for attachment in attachmentList %}
            <li>
              <i class="bi bi-{{ attachment.icon }}" aria-hidden="true"></i>
              <a href="{{ attachment.url }}">{{ attachment.filename|e }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}

      <p class="d-print-none">{{ writeCommentMsg|raw }}</p>
      <div class="d-print-none" id="comments">{{ renderComments|raw }}</div>
    </div>

    <div class="col-md-4">
      <div class="position-sticky" style="top: 2rem">
        <div class="p-4 mb-3 bg-light-subtle border rounded">
          <ul class="list-group list-group-flush bg-transparent">
            <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent">
              <div>
                <i aria-hidden="true" class="bi bi-clock"></i>
                <span class="data" id="pmf-reading-time-minutes">~ 0 min</span>
              </div>
              <a class="badge text-bg-secondary rounded-pill text-decoration-none" href="{{ solutionIdLink }}">
                ID #{{ solutionId }}
              </a>
            </li>
            <li class="list-group-item bg-transparent">
              <i aria-hidden="true" class="bi bi-person"></i>
              <span class="data" rel="author">{{ faqAuthor | raw }}</span>
            </li>
            <li class="list-group-item bg-transparent">
              <i aria-hidden="true" class="bi bi-calendar-date"></i>
              <span class="data">{{ 'msgCreateDate' | translate }} {{ faqDate }}</span>
            </li>
            <li class="list-group-item bg-transparent">
              <i aria-hidden="true" class="bi bi-calendar-check"></i>
              <span class="data">{{ 'msgUpdateDate' | translate }} {{ faqLastChangeDate }}</span>
            </li>
            {% if numberOfComments is defined %}
              <li class="list-group-item bg-transparent">
                <i aria-hidden="true" class="bi bi-chat-left-quote"></i>
                {{ numberOfComments }}
              </li>
            {% endif %}
            {% if userId != -1 %}
              <li class="list-group-item bg-transparent">
                <i aria-hidden="true" id="pmf-bookmark-icon" class="{{ bookmarkIcon }}"></i>
                <a id="pmf-bookmark-toggle" href="#" rel="noopener" class="text-decoration-none"
                   data-pmf-action="{% if isFaqBookmark == true %}remove{% else %}add{% endif %}" data-pmf-id="{{ id }}"
                   data-pmf-csrf="{% if isFaqBookmark == true %}{{ csrfTokenRemoveBookmark }}{% else %}{{ csrfTokenAddBookmark }}{% endif %}">
                  {{ msgAddBookmark }}
                </a>
              </li>
            {% endif %}
            <li class="list-group-item bg-transparent">
              <i aria-hidden="true" class="bi bi-file-pdf"></i>
              <a target="_blank" href="{{ linkToPdf }}" rel="noopener" class="text-decoration-none">
                {{ msgPdf }}
              </a>
            </li>
            {% if enableSendToFriend == true %}
              <li class="list-group-item bg-transparent">
                <i aria-hidden="true" class="bi bi-share"></i>
                <a rel="nofollow" href="#" class="text-decoration-none" data-bs-toggle="modal"
                   data-bs-target="#shareModel"
                   id="shareButton" data-bs-placement="top"> {{ msgShareFAQ }}</a>
              </li>
            {% endif %}
            {% if msgChangeLanguage is defined %}
              <li class="list-group-item bg-transparent">{{ switchLanguage|raw }}</li>
            {% endif %}
            {% if permissionEditFaq == true %}
              <li class="list-group-item bg-transparent">
                <i aria-hidden="true" class="bi bi-pencil"></i>
                <a class="text-decoration-none" href="./admin/faq/edit/{{ id }}/{{ lang }}">
                  {{ ad_entry_edit_1 }} {{ ad_entry_edit_2 }}
                </a>
              </li>
            {% endif %}
          </ul>
        </div>

        <div class="p-4 mb-3 bg-light-subtle border rounded">
          <h4 class="fst-italic">{{ 'msgVoteUsability' | translate }}</h4>
          <form action="#" method="post" class="form-inline pmf-voting-form">
            <input type="hidden" name="voting-id" id="voting-id" value="{{ id }}">
            <input type="hidden" name="voting-language" id="voting-language" value="{{ lang }}">
            <div class="pmf-stars text-center">
              <button type="submit" class="pmf-voting-star" data-star="1">
                &#9733;
                <span class="pmf-stars-screen-reader">1 Star</span>
              </button>
              <button type="submit" class="pmf-voting-star" data-star="2">
                &#9733;
                <span class="pmf-stars-screen-reader">2 Stars</span>
              </button>
              <button type="submit" class="pmf-voting-star" data-star="3">
                &#9733;
                <span class="pmf-stars-screen-reader">3 Stars</span>
              </button>
              <button type="submit" class="pmf-voting-star" data-star="4">
                &#9733;
                <span class="pmf-stars-screen-reader">4 Stars</span>
              </button>
              <button type="submit" class="pmf-voting-star" data-star="5">
                &#9733;
                <span class="pmf-stars-screen-reader">5 Stars</span>
              </button>
            </div>
            <div class="text-end bold">&empty; <span id="rating">{{ renderVotingResult|raw }}</span></div>
          </form>
        </div>

        {% if renderTags is defined %}
          <div class="p-4 mb-3 bg-light-subtle border rounded">
            <h4 class="fst-italic">{{ renderTagsHeader }}</h4>
            <div>{{ renderTags | raw }}</div>
          </div>
        {% endif %}
        {% if renderRelatedArticles is defined %}
          <div class="p-4 mb-3 bg-light-subtle border rounded">
            <h4 class="fst-italic">{{ renderRelatedArticlesHeader }}</h4>
            {{ renderRelatedArticles | raw }}
          </div>
        {% endif %}
        {% if renderRelatedCategories is defined %}
          <div class="p-4 mb-3 bg-light-subtle border rounded">
            <h4 class="fst-italic">{{ renderRelatedCategoriesHeader }}</h4>
            {{ renderRelatedCategories | raw }}
          </div>
        {% endif %}
        {% if notes is defined %}
          <div class="p-4 mb-3 bg-light-subtle border rounded">
            <h4>{{ notesHeader }}</h4>
            <p>{{ notes | raw }}</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="modal fade" id="pmf-modal-add-comment" tabindex="-1" aria-labelledby="commentModalLabel"
       aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="commentModalLabel">{{ msgCommentHeader }}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ msgCancel }}"></button>
        </div>
        <div class="modal-body">
          <div id="pmf-add-comment-error"></div>

          <form id="pmf-add-comment-form" action="#" method="post" class="needs-validation" novalidate>
            <input type="hidden" name="id" id="id" value="{{ id }}" />
            <input type="hidden" name="lang" id="lang" value="{{ lang }}" />
            <input type="hidden" name="type" id="type" value="faq" />
            <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfTokenAddComment }}">

            <div class="row mb-2">
              <div class="col">
                <label class="sr-only" for="user">{{ msgNewContentName }}</label>
                <input
                  type="text"
                  name="user"
                  id="user"
                  class="form-control"
                  required
                  placeholder="{{ msgNewContentName }}"
                  value="{{ defaultContentName }}"
                />
              </div>
            </div>
            <div class="row mb-2">
              <div class="col">
                <label class="sr-only" for="mail">{{ msgNewContentMail }}</label>
                <input
                  type="email"
                  name="mail"
                  id="mail"
                  class="form-control"
                  required
                  placeholder="{{ msgNewContentMail }}"
                  value="{{ defaultContentMail }}"
                />
              </div>
            </div>
            <div class="row mb-2">
              <div class="col">
              <textarea
                rows="10"
                name="comment_text"
                id="comment_text"
                class="form-control"
                required
                placeholder="{{ msgYourComment }}"
              ></textarea>
              </div>
            </div>

            {{ captchaFieldset|raw }}
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ msgCancel }}</button>
          <button type="button" class="btn btn-primary" id="pmf-button-save-comment">{{ msgNewContentSubmit }}</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="shareModel" tabindex="-1" aria-labelledby="ShareLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ShareLabel">{{ 'msgShareFAQ' | translate }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body share-modal-body">
          <p>{{ 'msgShareLinkVia' | translate }}</p>
          <div class="d-flex align-items-center icons">
            <a class="fs-5 d-flex align-items-center justify-content-center" target="_blank"
               href="https://www.linkedin.com/sharing/share-offsite/?url={{ currentPageUrl | url_encode }}">
              <span class="bi bi-linkedin"></span>
            </a>
            <a class="fs-5 d-flex align-items-center justify-content-center" target="_blank"
               href="https://reddit.com/submit?url={{ currentPageUrl | url_encode }}&title={{ msgShareText | url_encode }}">
              <span class="bi bi-reddit"></span>
            </a>
            <a class="fs-5 d-flex align-items-center justify-content-center" target="_blank"
               title="{{ msgShareViaWhatsapp }}"
               href="https://wa.me/?text={{ msgShareText | url_encode }}+{{ currentPageUrl | url_encode }}">
              <span class="bi bi-whatsapp"></span>
            </a>
            <a class="fs-5 d-flex align-items-center justify-content-center" target="_blank"
               href="https://telegram.me/share/url?url={{ currentPageUrl | url_encode }}>&text={{ msgShareText | url_encode }}">
              <span class="bi bi-telegram"></span>
            </a>
          </div>
          <p>{{ 'msgCopyLink' | translate }}</p>
          <div class="field d-flex align-items-center justify-content-between">
            <span class="bi bi-link text-center"></span>
            <input type="text" class="form-control" id="pmf-share-link" value="{{ currentPageUrl }}" readonly>
            <button class="btn btn-primary" id="pmf-share-link-copy-button"
                    data-pmf-message="{{ 'msgLinkCopied' | translate }}">
              {{ 'msgCopy' | translate }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

{% endblock %}