<?php
/*
 * Template Name: Module single static
 *
 */

get_header("static");
?>
<main>

  <div class="hero-module">
    <div class="hero-module__img-wrap">
      <picture>
        <source srcset="<?= THEMEROOT ?>/frontend/img/hero-module-desktop.jpg" media="(min-width: 620px)">
        <img class="hero-module__img" src="<?= THEMEROOT ?>/frontend/img/hero-module-mobile.jpg" alt="" />
      </picture>
    </div>
    <div class="container">
      <div class="hero-module__content">
        <h1 class="hero-module__title h2">Module name</h1>
        <p class="hero-module__text h6">Gravida consequat, sed vulputate fames. Non lectus nunc purus vulputate massa quis dolor. Pellentesque varius turpis aliquam, a viverra. Eu facilisis auctor diam, sem. Bibendum quis purus consequat malesuada metus faucibus.</p>
        <a href="#" class="btn btn--hollow modal-form-trigger"><span>Sign up for this module</span></a>
      </div>
    </div>
  </div>

  <section class="courses-list">
    <div class="container">
      <div class="filters">
        <div class="row">
          <div class="col-9 col-sm-6 col-md-3">
            <div class="form-group">
              <input type="text" placeholder="Search..." name="search" id="search">
            </div>
          </div>
          <div class="col-3 hidden-sm">
            <div class="filter-btn">
              <span>filter</span>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 not-visible">
            <div class="form-group">
              <select name="filter1" id="filter1">
                <!-- Using CSS to hide the first option when the select is open so make sure the "select" text stays like here in the first option always -->
                <option value="select">Select</option>
                <option value="option1">option 1</option>
                <option value="option2">option 2</option>
                <option value="option3">option 3</option>
                <option value="option4">option 4</option>
                <option value="option5">option 5</option>
              </select>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 not-visible">
            <div class="form-group">
              <select name="filter2" id="filter2">
                <!-- Using CSS to hide the first option when the select is open so make sure the "select" text stays like here in the first option always -->
                <option value="select">Select</option>
                <option value="option1">option 1</option>
                <option value="option2">option 2</option>
                <option value="option3">option 3</option>
                <option value="option4">option 4</option>
                <option value="option5">option 5</option>
              </select>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3 not-visible">
            <div class="form-group">
              <select name="filter3" id="filter3">
                <!-- Using CSS to hide the first option when the select is open so make sure the "select" text stays like here in the first option always -->
                <option value="select">Select</option>
                <option value="option1">option 1</option>
                <option value="option2">option 2</option>
                <option value="option3">option 3</option>
                <option value="option4">option 4</option>
                <option value="option5">option 5</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <!-- Note to WP Dev: These boxes differ in a few ways from the courses found in homepage since they're not a course, but a "folder" for multiple courses, so no video overlay etc and the btn has a different wrapper (mind the added class) -->
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-1.jpg" alt="" />
                <div class="course-box__watch video-trigger" data-video-link="vid1">
                  <div class="course-box__text">watch trailer</div>
                  <div class="course-box__icon">
                    <svg class="icon-play"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-play"></use></svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Manually switching between reactors</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment.</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-2.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
                <div class="course-box__watch video-trigger" data-video-link="vid2">
                <div class="course-box__text">watch trailer</div>
                  <div class="course-box__icon">
                    <svg class="icon-play"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-play"></use></svg>
                  </div>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Starting and regulating coldbox purging purging</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment. More text to check height of elements etc etc. Should be equal height</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-3.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Starting and regulating coldbox purging purging</h2>
              <p>Become more aware of hazards.</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-1.jpg" alt="" />
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Manually switching between reactors</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment.</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-2.jpg" alt="" />
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Starting and regulating coldbox purging purging</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment. More text to check height of elements etc etc. Should be equal height</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-3.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Starting and regulating coldbox purging purging</h2>
              <p>Become more aware of hazards.</p>
              <div class="btn-left">
                <a href="#" class="btn btn--gradient-small">Learn more</a>
              </div>
            </div>
          </article>
        </div>
      </div>
      <!-- According to the designer, pagination should always show only the three closest pages..so active page  and +1 / -1 on that.
      The active page is centered unless it's the first or last page, in which case there will still be three pages shown, but the active page (being the first or last one) won't be centered -->
      <div class="pagination">
        <a href="#" class="previous">
          <svg class="icon-small-arrow-left"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-left"></use></svg>
        </a>
        <a href="#" class="page">1</a>
        <a href="#" class="page active">2</a>
        <a href="#" class="page">3</a>
        <a href="#" class="previous">
          <svg class="icon-small-arrow-right"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-right"></use></svg>
        </a>
      </div>
    </div>
  </section>

</main>

<?php

get_footer("static");

?>