<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.poptrox.min.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/init.js"></script>
  <link rel="stylesheet" href="css/skel.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/style-xlarge.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>

<body id="top">

  <!-- Header -->
  <header id="header" style="background-image:		url('images/overlay.png'), url({{background}});">
    <div>
      <a href="#" class="image avatar"><img src="{{thumb}}" alt="">
      </a>
      {{#if title}}
      <h1>{{title}}</h1>
      {{/if}}
      {{#if act_title}}
      <p>{{act_title}}</p>
      {{/if}}
    </div>
    <nav id="nav">
      <ul>
        {{#if description}}
        <li>
          <a class="page-scroll" href="#about">特色及細節</a>
        </li>
        {{/if}}
        {{#multiOr location fee time}}
        <li>
          <a class="page-scroll" href="#detail">活動細節</a>
        </li>
        {{/multiOr}}
        {{#if register}}
        <li>
          <a class="page-scroll" href="#register">報名</a>
        </li>
        {{/if}}
        {{#if member.length}}
        <li>
          <a class="page-scroll" href="#member">活動成員</a>
        </li>
        {{/if}}
        {{#if unit.length}}
        <li>
          <a class="page-scroll" href="#unit">主辦單位</a>
        </li>
        {{/if}}
        {{#if sponser}}
        <li>
          <a class="page-scroll" href="#sponser">贊助商</a>
        </li>
        {{/if}}
        {{#if contact}}
        <li>
          <a class="page-scroll" href="#contact">聯絡</a>
        </li>
        {{/if}}
      </ul>
    </nav>

  </header>


  <!-- Main -->
  <div id="main">
    {{#if description.length}}
    <section id="about">
      <h1><i class="fa fa-inbox"></i>關於活動特色及細節</h1>
      <hr>
      {{#each description}}
      <div style="min-height: 180px;">
        {{#ifOdd @index}}
        {{#if detail}}
        <h4 style="text-align: right;">{{detail}}</h4>
        {{/if}}
        {{#if subdetail}}
        {{#if image}}
        <span class="image left">
          <img src="{{image}}" alt="image" />
        </span>
        {{/if}}
        <p>{{subdetail}}</p>
        {{/if}}
        {{else}}
        {{#if detail}}
        <h4>{{detail}}</h4>
        {{/if}}
        {{#if subdetail}}
        {{#if image}}
        <span class="image right">
          <img src="{{image}}" alt="image" />
        </span>
        {{/if}}
        <p>{{subdetail}}</p>
        {{/if}}
        {{/ifOdd}}
      </div>
      {{/each}}
    </section>
    {{/if}}

    <section id="detail">
      <h1><i class="fa fa-info-circle"></i>活動資訊</h1>
      <hr>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2 text-center">
            {{#if location}}
            <div class="col-lg-12 text-center">
              <div class="row">
                <h3 class="section-heading"><i class="fa fa-map-marker"></i>活動地點</h3>
              </div>
            </div>
            <h4 class="section-heading">{{location}}</h4>
            <hr class="divider">
            {{/if}}
            {{#if time}}
            <div class="col-lg-12 text-center">
              <div class="row">
                <h3 class="section-heading"><i class="fa fa-calendar-o"></i>活動時間</h3>
              </div>
            </div>
            <h4 class="section-heading">{{time}}</h4>
            <hr class="divider">
            {{/if}}
            {{#if fee}}
            <div class="col-lg-12 text-center">
              <div class="row">
                <h3 class="section-heading"><i class="fa fa-money"></i>活動費用</h3>
              </div>
            </div>
            <h4 class="section-heading">{{fee}}</h4>
            <hr class="divider">
            {{/if}}
            {{#multiOr register.detail register.link}}
            <div class="col-lg-12 text-center">
              <div class="row" id="register">
                <h3 class="section-heading"><i class="fa fa-map-marker"></i>報名資訊</h3>
              </div>
            </div>
            {{#if register.link}}
            <h4>
              <a href="{{register.link}}" class="btn btn-primary btn-xl ">前往報名</a>
            </h4>
            {{/if}}

            {{#if register.detail}}
            <p>
              {{register.detail}}
            </p>
            {{/if}}
            {{/multiOr}}
          </div>
        </div>
      </div>
    </section>

    {{#if member.length}}
    <section id="member">
      <h1><i class="fa fa-user"></i>活動成員</h1>
      <hr>
      <div class="row">
        {{#each member}}
        {{#ifOdd @index}}
        <article class="6u$ 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{else}}
        <article class="6u 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{/ifOdd}}
        {{/each}}
      </div>
    </section>
    {{/if}}

    {{#if unit.length}}
    <section id="unit">
      <h1><i class="fa fa-user"></i>活動主辦單位</h1>
      <hr>
      <div class="row">
        {{#each unit}}
        {{#ifOdd @index}}
        <article class="6u$ 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{else}}
        <article class="6u 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{/ifOdd}}
        {{/each}}
      </div>
    </section>
    {{/if}}




    {{#if sponser.length}}
    <section id="sponser">
      <h1><i class="fa fa-users"></i>活動贊助商</h1>
      <hr>
      <div class="row">
        {{#each sponser}}
        {{#ifOdd @index}}
        <article class="6u$ 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{else}}
        <article class="6u 12u$(3) work-item">
          {{#if thumb}}
          <a href="{{thumb}}" class="thumb fit thumb">
            <img src="{{thumb}}" alt="" width="80%" style="border-radius: 20px;">
          </a>
          {{/if}}
          {{#if name}}
          <h3>{{name}}</h3>
          {{/if}}
          {{#if description}}
          <p>{{description}}</p>
          {{/if}}
          <br>
          {{#if link}}
          <a href="{{link}}">
            <p>網路連結</p>
          </a>
          {{/if}}
        </article>
        {{/ifOdd}}
        {{/each}}
      </div>
    </section>
    {{/if}}




    {{#multiOr contact.address contact.email contact.phone}}
    <section id="contact">
      <div class="container">
        <h1><i class="fa fa-info"></i>聯絡我們</h1>
        <hr>
        <div class="features container">
          <article class="row">
            {{#if contact.detail}}
            <div class="col-lg-4 text-center">
              <i class="fa fa-info fa-3x wow bounceIn"></i>
              <p>{{contact.detail}}</p>
            </div>
            {{/if}}
            {{#if contact.phone}}
            <div class="col-lg-4 text-center">
              <i class="fa fa-phone fa-3x wow bounceIn"></i>
              <p>{{contact.phone}}</p>
            </div>
            {{/if}}
            {{#if contact.email}}
            <div class="col-lg-4 text-center">
              <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
              <p><a href="mailto:{{contact.email}}">{{contact.email}}</a></p>
            </div>
            {{/if}}
          </article>
        </div>
      </div>
    </section>
    {{/multiOr}}

  </div>

  <!-- Footer -->
  <footer id="footer">
    <ul class="icons">
      {{#if twitter}}
      <li><a href="http://twitter.com/{{twitter}}" class="icon fa-twitter"><span class="label">{{twitter}}</span></a>
      </li>
      {{/if}}
      {{#if facebook}}
      <li><a href="http://facebook.com/{{facebook}}" class="icon fa-facebook"><span class="label">{{faceook}}</span></a>
      </li>
      {{/if}}
      {{#if contact.email}}
      <li><a href="mailto:{{contact.email}}" class="icon fa-envelope-o"><span class="label">{{email}}</span></a>
      </li>
      {{/if}}
    </ul>
  </footer>


</body>
<html>
