{% extends ../public_base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('dashboard', 'dashboard', data['lang']) }}{% end %}

{% block content %}
<!-- View for Large screen -->
<style>
  .auth.auth-bg-1 {
    background: url("../../static/assets/images/auth/{% raw data['background'] %}"),
    url("/static/assets/images/auth/login_1.jpg");
    background-size: cover;
  }
</style>
<div class="row justify-content-center">
  <div class="content-wrapper col-md login-modal d-none d-sm-block" style="background-color: var(--dropdown-bg);">
    <img src="/static/assets/images/logo_long.png" style='width: 25%; margin-left: 38%;'>
    <hr />
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr class="rounded">
            <th>{{ translate('dashboard', 'server', data['lang']) }}</th>
            <th>{{ translate('dashboard', 'players', data['lang']) }}</th>
            <th>{{ translate('dashboard', 'motd', data['lang']) }}</th>
            <th>{{ translate('dashboard', 'version', data['lang']) }}</th>
            <th>{{ translate('dashboard', 'status', data['lang']) }}</th>
          </tr>
        </thead>
        <tbody>
          {% if data['running'] != 0 %}
          <span id="sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4>
          {% end %}
          {% for server in data['servers'] %}
          {% if server['server_data']['show_status'] %}
          <tr>
            <td id="server_name_{{ server['stats']['server_id']['server_id'] }}">
              <i class="fas fa-server"></i>
              {{ server['server_data']['server_name'] }}
            </td>
            {% if server['stats']['int_ping_results'] != 'False' %}
            <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
              {{ server['stats']['online'] }} / {{ server['stats']['max'] }} {{ translate('dashboard', 'max',
              data['lang']) }}<br />
            </td>
            <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
              {% if server['stats']['desc'] != 'False' %}
              <img src="/static/assets/images/pack.png" alt="icon"
                style="-webkit-filter:grayscale(100%); filter:grayscale(100%)" />
              <span id="input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
                server['stats']['desc'] }}</span> <br />
              {% end %}
            </td>
            <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
              {% if server['stats']['version'] != 'False' %}
              {{ server['stats']['version'] }}
              {% end %}
            </td>
            {% else %}
            <td id="server_players_{{ server['stats']['server_id']['server_id'] }}">
              <span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>
            </td>
            <td id="server_motd_{{ server['stats']['server_id']['server_id'] }}">
              <span class="text-warning">Crafty can't get infos from this Server </span>
            </td>
            <td id="server_version_{{ server['stats']['server_id']['server_id'] }}">
              <span class="text-warning"><i class="fas fa-question"></i></i></span>
            </td>
            {% end %}
            <td id="server_online_status_{{ server['stats']['server_id']['server_id'] }}">
              {% if server['stats']['running'] %}
              <span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])
                }}</span>
              {% else %}
              <span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])
                }}</span>
              {% end %}
            </td>
          </tr>
          {% end %}
          {% end %}
        </tbody>
      </table>
    </div>
    <hr />
  </div>
</div>
<!-- View for Small screen -->
<div class="row justify-content-center align-items-sm-center">
  <div class="content-wrapper login-modal d-sm-none d-block"  style="background-color: var(--dropdown-bg);">
    <img src="/static/assets/images/logo_long.png" style='width: 100%;'>
    <hr />
    {% if data['running'] != 0 %}
    <span id="m_sync" style="margin-left: 5px;"><i class="fas fa-sync fa-spin"></i></span></h4>
    {% end %}
    <div class="accordion" id="accordionServers">
      {% for server in data['servers'] %}
      <div class="card mb-0">
        <div class="card-header" id="heading-{{server['server_data']['server_id']}}">
          <h2 class="mb-0 container overflow-hidden">
            <div class="row">
              <div class="col-8 mx-0 px-0">
                <a id="m_server_name_{{ server['stats']['server_id']['server_id'] }}"
                  class="btn btn-link d-flex justify-content-center" type="button" data-toggle="collapse"
                  data-target="#collapse-{{server['server_data']['server_id']}}" aria-expanded="false"
                  aria-controls="collapse-{{server['server_data']['server_id']}}">
                  <i class="fas fa-server"></i>
                  {{ server['server_data']['server_name'] }}
                </a>
              </div>
              <div class="col-4 mx-0 px-0">
                <a id="m_server_online_status_{{ server['stats']['server_id']['server_id'] }}"
                  class="btn btn-link d-flex justify-content-center" type="button">
                  {% if server['stats']['running'] %}
                  <div id="m_server_players_{{ server['stats']['server_id']['server_id'] }}">
                    <span class="text-success"><i class="fas fa-signal"></i> {{ server['stats']['online'] }} / {{
                      server['stats']['max'] }}</span>
                  </div>
                  {% else %}
                  <span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline',
                    data['lang']) }}</span>
                  {% end %}
                </a>
              </div>
            </div>
          </h2>
        </div>

        <div id="collapse-{{server['server_data']['server_id']}}" class="collapse"
          aria-labelledby="heading-{{server['server_data']['server_id']}}" data-parent="#accordionServers">
          <div class="card-body">
            {% if server['stats']['int_ping_results'] != 'False' %}
            <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}" class="media">
              {% if server['stats']['desc'] != 'False' %}
              <img src="/static/assets/images/pack.png" class="w-25 mr-3" alt="icon"
                style="-webkit-filter:grayscale(100%); filter:grayscale(100%);" />
              {% end %}
              <div class="media-body">
                {% if server['stats']['desc'] != 'False' %}
                <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
                  <span id="m_input_motd_{{ server['stats']['server_id']['server_id'] }}" class="input_motd">{{
                    server['stats']['desc'] }}</span> <br />
                </div>
                {% end %}
              </div>
            </div>
            <br />
            <div id="m_server_version_{{ server['stats']['server_id']['server_id'] }}">
              {% if server['stats']['version'] != 'False' %}
              {{ server['stats']['version'] }}
              {% end %}
            </div>
            {% else %}
            <div class="row">
              <div class="col-12">
                <div id="m_server_motd_{{ server['stats']['server_id']['server_id'] }}">
                  <span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from
                    this Server </span>
                </div>
                <div id="m_server_version_{{ server['stats']['server_id']['server_id'] }}"></div>
              </div>
            </div>
            {% end %}
          </div>
        </div>
      </div>
      {% end %}
    </div>
  </div>
</div>
{% end %}

{% block js %}

<script src="/static/assets/js/motd.js"></script>
<script>
  function display_motd() {
    var all_motds = Array.from(document.getElementsByClassName('input_motd'));
    for (element of all_motds) {
      initParser(element.id, element.id);
    };
  }

  function update_one_server_status(server) {
    /* Normal Screen view */
    server_players = document.getElementById('server_players_' + server.id);
    server_motd = document.getElementById('server_motd_' + server.id);
    server_version = document.getElementById('server_version_' + server.id);
    server_online_status = document.getElementById('server_online_status_' + server.id);
    /* Small Screen view */
    m_server_players = document.getElementById('m_server_players_' + server.id);
    m_server_motd = document.getElementById('m_server_motd_' + server.id);
    m_server_version = document.getElementById('m_server_version_' + server.id);
    m_server_online_status = document.getElementById('m_server_online_status_' + server.id);

    /* TODO Update each element */
    if (server.int_ping_results) {
      document.getElementById('sync').innerHTML = '';
      document.getElementById('m_sync').innerHTML = '';
      /* Update Players */
      if (server.players) {
        server_players.innerHTML = server.online + ` / ` + server.max + ` {{ translate('dashboard', 'max', data['lang']) }}<br />`
      }

      /* Update Motd */
      var motd = "";
      if (server.desc) {
        if (server.icon) {
          motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
          m_motd = `<img src="data:image/png;base64,` + server.icon + `" alt="icon" /> `;
        }
        else {
          motd = `<img src="/static/assets/images/pack.png" alt="icon" /> `;
          m_motd = `<img class="w-25 mr-3" src="/static/assets/images/pack.png" alt="icon" /> `;
        }

        motd = motd + `<span id="input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span> <br />`;
        m_motd = m_motd + `<div class="media-body"><span id="m_input_motd_` + server.id + `" class="input_motd">` + server.desc + `</span></div>`;
        server_motd.innerHTML = motd;
        m_server_motd.innerHTML = m_motd;
      }

      /* Version */
      if (server.version) {
        server_version.innerHTML = server.version;
        m_server_version.innerHTML = server.version;
      }
    }
    else {
      server_players.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i></span>`;
      server_motd.innerHTML = `<span class="text-warning">Crafty can't get infos from this Server </span>`;
      server_version.innerHTML = `<span class="text-warning"><i class="fas fa-question"></i></i></span>`;
      m_server_motd.innerHTML = `<span class="text-warning"><i class="fas fa-exclamation-triangle"></i> Crafty can't get infos from this Server </span>`;
    }

    /* Update Online Status */
    var online_status = "";
    if (server.running) {
      online_status = `<span class="text-success"><i class="fas fa-signal"></i> {{ translate('dashboard', 'online', data['lang'])}}</span>`;
      m_online_status = `<span class="text-success"><i class="fas fa-signal"></i>` + server.online + ` / ` + server.max + `</span>`;
    }
    else {
      online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
      m_online_status = `<span class="text-danger"><i class="fas fa-ban"></i> {{ translate('dashboard', 'offline', data['lang'])}}</span>`;
    }
    server_online_status.innerHTML = online_status;
    m_server_online_status.innerHTML = m_online_status;
  }

  function update_servers_status(data) {
    console.log(data);
    update_one_server_status(data[0]);
    display_motd();
  }

  $(document).ready(function () {
    console.log("ready!");

    if (webSocket) {
      webSocket.on('update_server_status', update_servers_status);
    }
  }());
</script>

{% end %}