---
navigable: true
title: Contact
order: 10
narrow_page: true
icon_size: 2x
contact_links:
  - icon: facebook
    link: https://www.facebook.com/zeus.wpi/
    description: Facebook
    action: Like us
  - icon: envelope
    link: ../contact#board
    description: Email
    action: Mail us
  - icon: twitter
    link: https://twitter.com/zeuswpi
    description: Twitter
    action: Follow us
  - icon: comments
    link: https://mattermost.zeus.gent/
    description: Mattermost
    action: Message us
  - icon: inbox
    link: http://lists.zeus.ugent.be/mailman/listinfo/leden
    description: Mailinglist
    action: Keep up to date
  - icon: github
    link: https://github.com/ZeusWPI/
    description: GitHub
    action: Fork us
  - icon: phone
    link: 'tel:+3292644751'
    description: Phone
    action: Call us
---

<% content_for :head do %>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<%= asset :js, 'epcqr' %>
<%= asset :js, 'tabtopup' %>
<% end %>


<div id="tabtopupmodal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Top up Tab with EPC QR code</p>
    </header>
    <section class="modal-card-body">
      <div style="height: 256px"><div id="tabtopup-qrcode"></div></div>
      <p id='tabtopup-message'></p>
      <div class="field">
        <label class="label" for="tabtopup-username">Zeus username:</label>
          <div class="control has-icons-left">
             <input id="tabtopup-username" type="text" class="input" placeholder="j" name="tabtopup-username">
             <span class="icon is-small is-left">
              <%= fa :user, fw: true %>
             </span>
          </div>
        <p class="help">This is not necessarily the same as your Mattermost username, contact the board if you forgot your username</p>
      </div>
      <div class="field">
        <label class="label" for="tabtopup-amount">Amount (euro):</label>
          <div class="control has-icons-left">
             <input id="tabtopup-amount" type="text" step="0.01" class="input" value="5.0" name="tabtopup-amount">
             <span class="icon is-small is-left">
              <%= fa :euro, fw: true %>
             </span>
          </div>
      </div>
    </section>
    </div>
  </div>
</div>

<div class="content">
  <h1 class='title is-1 has-text-centered'>Contact us</h1>
  <h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h2>

  <!-- Contact buttons -->
  <div id='contact-icons' class='columns is-centered is-multiline is-mobile'>
  <% @item[:contact_links].each do |option| %>
  <div class='column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
    <div id='<%= option[:description] %>' class='contact-circle-option'>
    <a href='<%= option[:link] %>' class='contact-circle-wrapper'>
      <div class='contact-circle is-centered'>
        <div class='contact-circle-pulse grow'></div>
        <%= fa option[:icon], size: @item[:icon_size], class: 'grow-large' %>
      </div>
    </a>
    <h4 class='contact-description is-uppercase'><%= option[:description] %></h4>
    <p class='has-text-centered'>
      <a href='<%= option[:link] %>' class='contact-text-link is-link'><%= option[:action] %></a>
    </p>
    </div>
  </div>
  <% end %>
  </div>

  <div id="board">
    <h2>The board (<%= pretty_year @config[:academic_year] %>)</h2>
    <blockquote>
      Mail us all at: <a href='mailto:bestuur@zeus.ugent.be'>bestuur@zeus.ugent.be</a>
    </blockquote>

    <%= render '/partials/_current_bestuur.*' %>
  </div>


  <!-- Extra information tiles -->
  <h2>Varia</h2>
  <div id='contact-info' class='tile is-ancestor is-vertical'>
    <div class='tile is-parent'>
      <div class='tile is-parent is-vertical'>

        <!-- Payment information -->
        <div id='payment-info' class='tile is-child box content has-text-centered'>
          <h1 class='title has-text-centered'>Pay us</h1>
          <hr/>
          <p id='banknumber' class='is-size-5'>
            BE03 7340 5456 0384
          </p>
          <p class='is-size-5'>
            <b>Please use the message <wbr>"TAB&nbsp;<em>&lt;username&gt;</em>" when manually topping up your Tab balance</b>
          </p>
          <a id="tab-qr-button" class="button">
            <%= fa :qrcode, fw: true %> Top up Tab balance
          </a>
          <a class='button' href='https://zeus.ugent.be/tab/'>
            <%= fa :euro, fw: true %> Use Tab
          </a>
        </div>

        <!-- Calling information -->
        <div id='calling-info' class='tile is-child box content has-text-centered'>
          <h1 class='title has-text-centered'>Call us</h1>
          <hr/>
          <p id='phone-number' class='is-size-5'>
            +32 9 264 47 51<br/>
            Internal: 4751
          </p>
        </div>
      </div>

      <!-- Address information -->
      <div id='address-info' class='tile is-parent'>
        <div class='tile is-child box content'>
          <h1 class='title has-text-centered'>Find us</h1>
          <hr/>
          <p class='is-size-5'>
            You can find our hiding place, or what we call <strong>'de kelder'</strong> at the basement level of following address:
          </p>
          <blockquote id='address' class='is-size-5'>
            Krijgslaan 281<br/>
            Campus Sterre S9<br/>
            9000 Gent<br/>
          </blockquote>
          <div id='contact-location-buttons'>
            <a class='button' href='https://www.google.com/maps/place/Zeus+WPI/@51.023115,3.7103,17z/data=!4m5!3m4!1s0x0:0x49fd54f81cafeb5f!8m2!3d51.0231149!4d3.7103?hl=en-US'>
              <%= fa :'map-marker', fw: true %> Google Maps
            </a>
            <a class='button' href='https://soleway.ugent.be/routes/4370'>
              <%= fa :'map-signs', fw: true %> Soleway
            </a>
            <a class='button' href='https://www.openstreetmap.org/node/5256134433'>
              <%= fa :'map-signs', fw: true %> Openstreetmap
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Mattermost information -->
    <div id='mattermost-info' class='tile is-parent'>
      <div class='tile is-child box content'>
        <h1 class='title has-text-centered'>Mattermost info</h1>
        <hr/>
        <p id='mattermost-info-text' class='is-size-5'>
          You can register with any valid email address.
        </p>
      </div>
    </div>
    <!-- Embedded map -->
    <div style="z-index: 0" class="map-wrapper box">
        <%= render '/partials/_map.erb', location: "Zeus WPI" %>
    </div>
  </div>


</div>