<% if(page.videos != undefined) { %>
  <% if(page.videos.length > 0 && page.hero_image == undefined) { %>
    <%- partial('_partial/video-player', {url: page.videos[0].url, is_hero: true}) %>
  <% } %>
<% } %>
<% if(page.hero_image != undefined) { %>
  <%- partial('_partial/hero', { image : page.hero_image }) %>
<% } %>
<div id="cover"></div>
<div class="project container up-spacer bottom-spacer">
  <div class="row">
    <div class="col-9">
      <% if (page.path){ %>
        <h1>
          <a href="<%- url_for(page.path) %>" itemprop="url"><%= page.title %></a>
        </h1>
      <% } else if (page.title){ %>
        <h1><%= page.title %></h1>
      <% } %>
    </div>
    <div class="col-3" style="text-align: right; margin-top: 5px;">
      <%- partial('_partial/project-dropdown', { links : page.links, project: page }) %>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p style="margin-bottom: 4px;">
        <% for (let i = 0; i < page.tags.data.length; i++) { %>
          <span class="badge badge-secondary"><%= page.tags.data[i].name %></span> 
        <% } %>
        <i> – <%= timeAgo(new Date(page.date)) %></i>
      </p>
      <p style="margin-bottom: 4px;">
        <%- partial('_partial/project-team', { contact_types : page.contact_types, contacts: page.contacts }) %>
      </p> 
      <hr>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div class="article-content" itemprop="articleBody">
        <%- page.content %>
      </div>
    </div>
  </div>
  
  
  <% if(page.screenshots != undefined) { %>
    <%- partial('_partial/screenshots', { screenshots : page.screenshots }) %>
  <% } %>

  <% if(page.videos != undefined) { %>
    <% if(page.videos.length > 0 && page.hero_image != undefined) { %>
      <%- partial('_partial/video-player', {url: page.videos[0].url, is_hero: false}) %>
    <% } %>
  <% } %>
</div>
<%- //partial('_partial/about-author') %>