{% extends 'base.html' %} {% block content %}
<section id="faq" class="section">
  <h3 class="title is-4 has-text-centered">常見問題</h3>
  <div class="container">
    {% for faq in faqs%}
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{ faq.question }}
        </p>
        <a href="#" class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          {{ faq.answer|safe }}
        </div>
      </div>
    </div>
    {% endfor %}
    {% if is_paginated %}
    <div class="pagination is-centered mt-5">

      <span class="step-links pagination-list">
      {% if page_obj.has_previous %}
        <a href="?page=1" class="pagination-link">回第一頁</a>
        <span class="pagination-ellipsis">&hellip;</span></li>
        {% comment %} <a href="?page=1" class="pagination-previous">回第一頁</a> {% endcomment %}
        {% comment %} <a href="?page={{ page_obj.previous_page_number }}" class="pagination-previous">上一頁</a> {% endcomment %}
        <a href="?page={{ page_obj.previous_page_number }}" class="pagination-link">{{ page_obj.previous_page_number }}</a>
      {% endif %}

        <span class="pagination-link is-current current">{{ page_obj.number }}</span>
      
      {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}" class="pagination-link">{{ page_obj.next_page_number }}</a>
        {% comment %} <a href="?page={{ page_obj.next_page_number }}" class="pagination-next">下一頁</a> {% endcomment %}
        <span class="pagination-ellipsis">&hellip;</span></li>
        <a href="?page={{ page_obj.paginator.num_pages }}" class="pagination-link">最後一頁</a>
      {% endif %}
      </span>
      <span >共 {{ page_obj.paginator.num_pages }} 頁</span>
    </div>
    
    {% endif %}


  </div>
</section>

{% endblock %} {% block js_extension %}
<script>
  $(document).ready(function() {
    // Toggle FAQ
    $(".card-header-icon").click(function(e) {
      $(this)
        .offsetParent()
        .find(".card-content")
        .toggleClass("show");
    });
  });
</script>

{% endblock%}