{% extends "base.jinja" %}
{% block head %}
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 500px;
  max-width: 100%; /* Full width */
  max-height: 100%; /* Full height */
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  
  background: rgba(0, 0, 0, 0.6);
}

/* Modal Content */
.modal-content {
  position: absolute;
  background-color: #fefefe;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
</style>
{% endblock %}
{% block content %}
<a href="{{mal_url}}">Log in to MAL</a>
<a href="{{anilist_url}}">Log in to Anilist</a>
<a href="{{url_for('aes.kitsu')}}">Log in to Kitsu</a>
<br/>
{% if state %}
{% if 'mal_token' in state %}
<button id="syncMALBtn">Sync to MAL</button>
{% endif %}
{% if 'anilist_token' in state %}
<button id="syncAnilistBtn">Sync to Anilist</button>
{% endif %}
{% if 'kitsu_token' in state %}
<button id="syncKitsuBtn">Sync to Kitsu</button>
{% endif %}
{% endif %}
<table>
    <thead>
        {% set sites = 0 %}
        {% if state %}
        <tr>
            <th></th>
            {% if 'mal_token' in state %}
            {% set sites = sites + 1 %}
            <th colspan="4">MyAnimeList</th>
            {% endif %}
            {% if 'anilist_token' in state %}
            {% set sites = sites + 1 %}
            <th colspan="4">Anilist</th>
            {% endif %}
            {% if 'kitsu_token' in state %}
            {% set sites = sites + 1 %}
            <th colspan="4">Kitsu</th>
            {% endif %}
        </tr>
        {% endif %}
        <tr>
            <th>Title</th>
            {% for i in range(sites) %}
            <th>Progress</th>
            <th>Score</th>
            <th>Status</th>
            <th>Links</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
    {% for x in discrepancies %}
        <tr>
            <td>{{ '[BROKEN] ' if x.is_broken() else '' }}{{ x.get_title() }}</td>
            {% for y in ['mal', 'anilist', 'kitsu'] %}
                {% if y in x.entries %}
            <td>{{ x.entries[y].progress|default('') }}</td>
            <td>{{ x.entries[y].score|default('') }}</td>
            <td>{{ x.entries[y].status|default('') }}</td>
            <td>{% if x.entries[y].link %}<a href="{{ x.entries[y].link }}">Link</a>{% endif %}</td>
                {% elif y + '_token' in state %}
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                {% endif %}
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>
<div class="modal-overlay"></div>
<form action='' method="post" novalidate>
{{ form.hidden_tag() }}
{% for x in modals %}
<div id="sync{{ x['type'] }}Modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Sync to {{ x['type'] }}</h2>
        </div>
        <div class="modal-body">
            <p>{{ x['msg'] }}</p>
        </div>
        <div class="modal-footer">            
            {% if x['type'] == 'MAL' %}
            {{ form.mal }}
            {% elif x['type'] == 'Anilist' %}
            {{ form.anilist }}
            {% elif x['type'] == 'Kitsu' %}
            {{ form.kitsu }}
            {% endif %}
        </div>
    </div>
</div>
{% endfor %}
</form>
<script>
var types = [
    {% for x in modals %}"{{ x['type'] }}",{% endfor %}
]
var i;
for (i = 0; i < {{ modals|length }}; i++) {
    let overlay = document.getElementsByClassName("modal-overlay")[0]
    let modal = document.getElementById("sync"+types[i]+"Modal");
    let btn = document.getElementById("sync"+types[i]+"Btn");
    let span = modal.getElementsByClassName("close")[0];
    btn.onclick = function() {
        modal.style.display = "block";
        overlay.style.display = "block";
    }
    span.onclick = function() {
        modal.style.display = "none";
        overlay.style.display = "none";
    }
    window.addEventListener('click', event => {
        if (event.target == modal) {
            modal.style.display = "none";
            overlay.style.display = "none";
        }
    });
}
</script>
{% endblock %}