<section class="col-12">
  <article class="pmf-faq">
    <header>
      <div class="float-right d-print-none" id="solution_id">
        <h4><a class="badge badge-info" href="{{ solutionIdLink }}"> ID #{{ solutionId }}</a>
        {{ extraButton }}</h4>
      </div>
      <h2>{{ question }}</h2>
      <div class="pmf-faq-meta clearfix">
        <div class="pmf-faq-reading-time">
          <i aria-hidden="true" class="fa fa-clock-o"></i>
          <span class="data" id="pmf-reading-time-minutes">~ 0 min</span>
        </div>
        <div class="pmf-faq-author">
          <i aria-hidden="true" class="fa fa-user"></i>
          <span class="data" rel="author">{{ faqAuthor }}</span>
        </div>
        <div class="pmf-faq-date">
          <i aria-hidden="true" class="fa fa-calendar"></i>
          <span class="data">{{ faqDate }}</span>
        </div>
        [enableComments]
        <div class="pmf-faq-comments">
          <i aria-hidden="true" class="fa fa-comments"></i>
          <span class="data"><a class="show-comment-form" href="#">{{ numberOfComments }}</a></span>
        </div>
        [/enableComments]
        <div class="pmf-faq-edit">{{ editThisEntry }}</div>
        <div class="pmf-social-links">
          <i aria-hidden="true" class="fa fa-file-pdf-o"></i>
          <a target="_blank" href="{{ linkToPdf }}" rel="noopener" title="{{ msgPdf }}"> {{ msgPdf }} </a>
        </div>
        <div class="pmf-social-links">{{ sendToFriend }}</div>
        <div class="pmf-social-links">{{ shareOnTwitter }}</div>
      </div>
    </header>
    <div class="pmf-faq-body">
      {{ answer }} [tagsAvailable] {{ renderTags }} [/tagsAvailable] [privateNotes]
      <div class="pmf-private-notes">
        <h4>{{ notesHeader }}</h4>
        <p>{{ notes }}</p>
      </div>
      [/privateNotes] [relatedFaqs]
      <aside id="accordionFaqs" class="accordion related-faqs d-print-none mt-3 mb-3">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" href="#collapseRelatedFaqs" data-parent="#accordionFaqs" data-toggle="collapse">
              {{ renderRelatedArticlesHeader }}
            </a>
          </div>
          <div id="collapseRelatedFaqs" class="accordion-body collapse">
            <div class="accordion-inner">{{ renderRelatedArticles }}</div>
          </div>
        </div>
      </aside>
      [/relatedFaqs] [relatedCategories]
      <aside id="accordionCategories" class="accordion related-categories d-print-none mt-3 mb-3">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a
              class="accordion-toggle"
              href="#collapseRelatedCategories"
              data-parent="#accordionCategories"
              data-toggle="collapse"
            >
              {{ renderRelatedCategoriesHeader }}
            </a>
          </div>
          <div id="collapseRelatedCategories" class="accordion-body collapse">
            <div class="accordion-inner">{{ renderRelatedCategories }}</div>
          </div>
        </div>
      </aside>
      [/relatedCategories]
    </div>
  </article>

  <ul id="tab" class="nav nav-tabs d-print-none" role="tablist">
    <li class="nav-item"><a class="nav-link active" href="#votingForm" data-toggle="tab">{{ msgVoteUsability }}</a></li>
    [switchLanguage]
    <li class="nav-item">
      <a class="nav-link" href="#switchAvailableLanguage" data-toggle="tab">{{ msgChangeLanguage }}</a>
    </li>
    [/switchLanguage] [addTranslation]
    <li class="nav-item"><a class="nav-link" href="#addTranslation" data-toggle="tab">{{ msgTranslate }}</a></li>
    [/addTranslation]
  </ul>

  <div class="tab-content pmf-faq-info d-print-none">
    <div class="tab-pane active d-print-none" id="votingForm">
      <form action="#" method="post" class="form-inline">
        <input type="hidden" name="artikel" value="{{ saveVotingID }}" />
        <div class="pmf-stars">
          <div class="pmf-star-rating" data-rating="{{ msgAverageVote }}">
            <span data-stars="5">☆</span>
            <span data-stars="4">☆</span>
            <span data-stars="3">☆</span>
            <span data-stars="2">☆</span>
            <span data-stars="1">☆</span>
          </div>
        </div>

        <div class="text-right"><strong>{{ msgAverageVote }}</strong><span id="rating">{{ printVotings }}</span></div>
      </form>
      <div id="votings"></div>
    </div>
    <div class="tab-pane d-print-none" id="switchAvailableLanguage">{{ switchLanguage }}</div>
    <div class="tab-pane d-print-none" id="addTranslation">
      <form action="{{ translationUrl }}" method="post" class="form-inline" accept-charset="utf-8">
        {{ languageSelection }}
        <button class="btn btn-primary" type="submit" name="submit">{{ msgTranslateSubmit }}</button>
      </form>
    </div>
  </div>

  <p class="d-print-none d-none">{{ writeCommentMsg }}</p>

  <aside class="pmf-create-comment d-print-none d-none" id="pmf-create-comment">
    <hr />

    <div id="loader"></div>

    <h4><i aria-hidden="true" class="fa fa-heart"></i> {{ msgCommentHeader }}</h4>

    <form id="formValues" action="#" method="post" accept-charset="utf-8">
      <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" />

      <div class="form-row">
        <div class="form-group 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 class="form-group 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="form-row">
        <div class="form-group col">
          <textarea
            rows="10"
            name="comment_text"
            id="comment_text"
            class="form-control"
            placeholder="{{ msgYourComment }}"
          ></textarea>
        </div>
      </div>

      {{ captchaFieldset }}

      <div class="text-right">
        <button class="btn btn-primary" id="submitcomment" type="submit">{{ msgNewContentSubmit }}</button>
      </div>
    </form>
  </aside>

  <div class="d-print-none" id="comments">{{ renderComments }}</div>
</section>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">#Revision {{ revisionNumber }} by {{ revisionAuthor }} at {{ revisionCreated }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       {{ revisionContent }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Send message</button>-->
      </div>
    </div>
  </div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    'use strict';
    $('div.pmf-stars > div.pmf-star-rating > span').on('click', (event) => {
      const numStars = $(event.target).data('stars');
      saveVoting('faq', '{{ id }}', numStars, '{{ lang }}');
    });
  });
</script>

<script src="assets/js/libs/highlight.min.js"></script>
<link rel="stylesheet" href="assets/js/libs/default.min.css" />