<div class="text-center">
  {% if logged %}
    <button type="button" value="{{ like }}" title="{{ button_like }}" data-oc-toggle="rate" class="btn btn-secondary"><i class="fa fa-thumbs-up"></i></button>
    <button type="button" value="{{ dislike }}" title="{{ button_dislike }}" data-oc-toggle="rate" class="btn btn-secondary"><i class="fa fa-thumbs-down"></i></button>
    <button type="button" value="{{ comment_add }}" data-oc-toggle="comment" data-oc-target="#comment-0" data-oc-trigger="#button-refresh" class="btn btn-secondary">{{ button_comment }}</button>
  {% else %}
    <a href="{{ login }}" class="btn btn-secondary"><i class="fa fa-thumbs-up"></i></a>
    <a href="{{ login }}" class="btn btn-secondary"><i class="fa fa-thumbs-down"></i></a>
    <a href="{{ login }}" class="btn btn-secondary">{{ button_login }}</a>
  {% endif %}
</div>
<hr/>
<div class="row mb-3">
  <div class="col">
    <h2>{{ heading_title }}</h2>
  </div>
  <div class="col-4">
    <div class="input-group">
      <label for="input-sort" class="input-group-text">{{ text_sort }}</label>
      <select id="input-sort" class="form-select">
        {% for sorts in sorts %}
          <option value="{{ sorts.href }}"{% if sorts.value == '%s-%s'|format(sort, order) %} selected{% endif %}>{{ sorts.text }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>
<div id="comment">{{ list }}</div>
<div id="modal-comment" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ text_write }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="form-comment" action="">
          <div class="mb-3">
            <label for="input-author" class="form-label">{{ entry_author }}</label>
            <input type="text" name="author" value="{{ author }}" placeholder="{{ entry_author }}" id="input-author" class="form-control" required/>
            <div id="error-author" class="invalid-feedback"></div>
          </div>
          <div class="mb-3">
            <label for="input-comment" class="form-label">{{ entry_comment }}</label>
            <textarea name="comment" rows="5" placeholder="{{ entry_comment }}" id="input-comment" class="form-control" required>{{ comment }}</textarea>
            <div id="error-comment" class="invalid-feedback"></div>
          </div>
          {{ captcha }}
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" id="button-comment" form="form-comment" class="btn btn-primary">{{ button_comment }}</button>
      </div>
    </div>
  </div>
</div>