<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/>

<%block name="pagetitle">${_("FAQ's")}</%block>

<div class="page-heading">
  <h1>${_("General FAQs")}</h1>
</div>
<section class="static-content">

  <div class="grid-manual grid-container">
    <div class="inner-container">
      <div class="row">
        <div class="col col-12 sm-col-12 md-col-3">
          <ul class="list-divided">
            <li class="item"><a href="#academic-planning" class="brand-link">${_("Lorem ipsum dolor sit amet")}</a></li>
            <li class="item"><a href="#registration" class="brand-link">${_("Lorem ipsum dolor sit amet")}</a></li>
            <li class="item"><a href="#finances" class="brand-link">${_("Lorem ipsum dolor sit amet")}</a></li>
          </ul>
        </div>
        <div class="col col-12 sm-col-12 md-col-9">
          <h2 id="academic-planning">${_("Academic Planning")}</h2>
          <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_0">
              <p>
                Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
              </p>
            </div>
          </article>

          <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_1">
              <p>
                Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
              </p>
            </div>
          </article>

          <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_2">
              <p>
                Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
              </p>
            </div>
          </article>

        <a href="#" class="brand-link back-to-top">${_("Back to top")}</a>

        <h2 id="registration">${_("Registration")}</h2>
        <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_0">
              <p>
                Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
              </p>
            </div>
          </article>

          <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_1">
              <p>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
              </p>
            </div>
          </article>

          <article class="response">
            <h3 class="question">Lorem ipsum dolor sit amet</h3>
            <div class="answer" id="edx_basics_faq_answer_2">
              <p>
              Lorem ipsum dolor sit amet
            </p>
            <ul id="list-bulleted">
              <li>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
              </li>
              <li>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
              </li>
            </ul>
            </div>
          </article>

      <a href="#" class="brand-link back-to-top">${_("Back to top")}</a>

      <h2 id="finances">${_("Finances")}</h2>
      <article class="response">
        <h3 class="question">Lorem ipsum dolor sit amet</h3>
        <div class="answer" id="edx_basics_faq_answer_1">
          <p>
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
          </p>
        </div>
      </article>
      <article class="response">
        <h3 class="question">Lorem ipsum dolor sit amet</h3>
        <div class="answer" id="edx_basics_faq_answer_1">
          <p>
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
          </p>
        </div>
      </article>
      <article class="response">
        <h3 class="question">Lorem ipsum dolor sit amet</h3>
        <div class="answer" id="edx_basics_faq_answer_1">
          <p>
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
          </p>
        </div>
      </article>
      <article class="response">
        <h3 class="question">Lorem ipsum dolor sit amet</h3>
        <div class="answer" id="edx_basics_faq_answer_1">
          <p>
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
          </p>
        </div>
      </article>
    <a href="#" class="brand-link back-to-top">${_("Back to top")}</a>

  </div>
  </div>
  </div>
  </div>
</section>

<%block name="js_extra">
<script src="${static.url('js/animation-scroll.js')}"></script>
<script type="text/javascript">
$(document).ready(function() {
    var open_question = "";
    var question_id;
    $('.response').click(function(){
      $(this).toggleClass('opened');
      answer = $(this).find(".answer");
      answer.slideToggle('fast');
    });
});

</script>
</%block>
