{% extends "layout.html" %}

{% block page_title %}{{current_event.name}}{% endblock %}

{% block body_class %}dashboard-page embed-view{% endblock %}

{% block content %}
<!-- With apologies to everyone for this cruddy page .. working on V2!! -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flipdown@0/dist/flipdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-resizable-dom@0.35.0/dist/jquery-resizable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Refresh social media wall every ten minutes -->
{% if with_social_wall %}
  <script language="JavaScript">
  setTimeout(function() {
    location.reload();
  }, 1000 * 60 * 5);
  </script>
{% endif %}

<div class="superpowers">
  <button type="button" class="show-announcements" title="Announcements (broadcast available to admin only)">📣</button>
</div>

<div id="dashboard-container">

<div class="d-flex flex-column flex-shrink-0 text-white bg-dark" style="width: 380px;">
  <a class="d-flex align-items-center flex-shrink-0 p-3 text-decoration-none border-bottom">
    <span class="fs-5 fw-semibold text-white"><tt>{{current_event.name}}</tt></span>
  </a>
  <div class="list-group list-group-flush scrollarea">
    <div id="projects"></div>
  </div>
</div>

<div class="d-flex align-items-stretch flex-fill">
  <img id="event-logo" src="{{ current_event.logo_url }}">
  {% if current_event.countdown %}
    <a href="{{ url_for('public.event', event_id=current_event.id) }}">
    <div id="clockDashboard" 
      class="event-countdown flipdown" 
      data-start="{{ current_event.countdown }}"></div>
    </a>
  {% endif %}
</div>

<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white socialwall" style="width: 380px;">
  <a class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
    <span class="fs-5 fw-semibold"><tt>DRIBDAT</tt></span>
  </a>
  <div class="list-group list-group-flush scrollarea">
    <div id="activities"></div>
  </div>
</div>

{% if with_social_wall == 'mastodon' %}
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white socialwall" style="width: 380px;">
  <div class="list-group list-group-flush border-bottom scrollarea">
    <iframe allowfullscreen sandbox="allow-top-navigation allow-scripts allow-popups allow-popups-to-escape-sandbox" width="100%" height="67%" src="https://www.mastofeed.com/apiv2/feed?userurl={{ wall_url }}&theme=light&size=100&header=false&replies=false&boosts=true" frameborder="0"></iframe>
  </div>
</div>
{% endif %}

</div><!-- /dashboard-container -->

<div class="{% if not status_text %}hidden{% endif %}" id="announcements">
  <textarea class="editable">{{ status_text }}</textarea>
</div>

<style>

#dashboard-container {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}

  html, body, body > .container-fluid { width: 100%; height: 100%; }
  body.dashboard-page {
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image: url('{{ current_event.gallery_url }}');
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  .hidden {
    display: none;
  }
  #projects {
    font-size: 14pt;
    list-style-type: none;
    padding: 0px;
  }
  #projects div {
    padding: 5px 10px;
    cursor: pointer;
    line-height: 1.2em;
  }
  #projects div a {
    display: block;
    font-family: monospace;
  }
  #projects a {
    color: inherit;
    text-decoration: none;
    opacity: 1;
  }
  #projects sp {
    display: block;
    font-size: 60%;
    min-width: 2em;
    max-width: 100%;
    border-bottom: 2px solid white;
  }

  .container-fluid .sidebar {
    height: 100%;
    padding: 0px;
    position: fixed;
    background-color: #000;
    color: white;
  }

  .container-fluid .socialwall {
    padding: 0px;
    background: #fff;
  }

  #event-logo {
    margin: 10px;
    width: auto;
    height: 16em;
  }

  #metrics {
    position: relative;
    left: 15px;
    top: 150px;
  }

  .dashboard-page .container.with-event { max-width: none; }
  #schedule { color: transparent; margin-top: 1em; }
  #schedule dashboard { color: #eee; display: initial !important; }
  #schedule > * { display: none; }

  #announcements {
    position: fixed;
    top: 26%;
    left: 60%;
    width: 15em;
    margin-left: -30em;
    z-index: 999;
  }

  #announcements button {
    display: block;
    opacity: 0.5;
  }

  #announcements textarea {
    width: 18em;
    height: 4em;
    font-size: 50px;
    font-weight: bold;
    padding: 0em 0.3em;
    color: blue;
    resize: both;
    background: #ffd73e;
    border-width: 10px;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cstyle%3Epath%7Banimation:stroke 5s infinite linear%3B%7D%40keyframes stroke%7Bto%7Bstroke-dashoffset:776%3B%7D%7D%3C/style%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232d3561' /%3E%3Cstop offset='25%25' stop-color='%23c05c7e' /%3E%3Cstop offset='50%25' stop-color='%23f3826f' /%3E%3Cstop offset='100%25' stop-color='%23ffb961' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3' stroke-dasharray='388'/%3E %3C/svg%3E") 1;
  }
  .superpowers {
    position: fixed;
    bottom: 0px; right: 50%;
    z-index: 999;
  }
  .superpowers button {
    border: 0px;
    background: none;
    font-size: 200%;
  }
  .superpowers button:hover {
    font-size: 300%;
  }
  .show-announcements:hover {
    opacity: 1;
  }

  .event-countdown {
    position: fixed;
    bottom: 4em;
    left: 50%;
    margin-left: -17em;
  }

  #activities {
    color: #333;
    font: 14pt/29pt sans-serif;
    text-align: right;
  }
  #activities a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    margin: 0px;
    padding: 0px 0.5em;
    font-size: 80%;
    line-height: 2em;
    text-align: right;
    background: white;
  }
  #activities img, #activities image, #activities iframe, #activities video {
    width: 100%;
  }
  #activities div {
    background:rgba(255,255,255,0.8);
    box-shadow: 3px 0px 7px rgba(0,0,0,0.2);
    border-radius: 3px;
    font-size: 80%;
    padding: 0 0.3em;
    margin: 1em;
    text-align: right;
    color: #999;
  }
  #activities p {
    padding-top: 0.5em;
    margin: 0px 0.5em;
    line-height: 1.2em;
    color: #000;
    font-size: 110%;
    text-align: left;
  }

  .vega-actions-wrapper, .vega-actions { display: none; }

  .blue-background-class {
    background: rgba(100, 100, 255, 0.5);
  }

</style>

<script>
var converter = new showdown.Converter();

refreshProjects = function() {
  $.getJSON('/api/event/current/projects.json', function(data) {
    $pp = $('#projects').empty();
    data.projects.forEach(function(p) {
      if (p.is_hidden) return;
      $pp.append('<div'+(p.logo_color?' style="background:'+p.logo_color+'"':'')+'>' +
        '<a href="/project/'+p.id+'" title="'+p.name+'">'+p.name+'</a>' +
        '<sp style="width:'+p.score*2+'px">'+p.score+'</sp>' +
      '</div>');
    });
  });

  $.getJSON('/api/project/posts.json?limit=12', function(data) {
    $pp = $('#activities').empty();
    data.activities.forEach(function(a) {
      if (!a.content) return;
      //a.content = a.content.replace(/\!\[.*\)/, '(img)')
      let content = converter.makeHtml(a.content);
      let shortname = a.project_name.substr(0,16);
      $pp.append('<div>' + content +
        '<a href="/project/'+a.project_id+'">'+shortname+' / @'+a.user_name + ' / ' + a.timesince + '</a>' +
      '</div>');
    });
  });

  setTimeout(refreshProjects, 60 * 1000); // refresh every minute
}
refreshProjects();

// Enable editable fields
$('.editable').each(function() {
  this.contentEditable = 'true';
});

// Enable announcements
$('.show-announcements').click(function() {
  if ($('#announcements').is(':visible')) {
    $('#announcements').hide();
  } else {
    $('#announcements').show();
  }
});

</script>

{% endblock %}