{% extends "bootstrap/base.html" %}
{% block title %}tia.paste{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
{% include "fragments/navbar.j2" %}
{% endblock %}

{% block content %}
{% import "fragments/table.j2" as table %}
    <iframe id="apps" src="https://technicalincompetence.club/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
    <div id="overlay" style="display: none;" onclick="showApps();"></div>
<div class="container" style="margin-top: 15px">
    <div class="col-lg-12">
        <div id="success-alert" class="alert alert-success" role="alert" style="display: none;"></div>
        <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;"></div>
        <h1>Your Pastes</h1>
        <br>
        <h3>Shortened Urls</h3>
        {{ table.build(links, 'links') }}
        <br>
        <h3>Pastes</h3>
        {{ table.build(pastes, 'pastes') }}
        <br>
        <h3>Images</h3>
        {{ table.build(images, 'images') }}
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function showError(error) {
    hideSuccess();
    $('#error-alert').text(error);
    $('#error-alert').show();
}

function showSuccess(message) {
    hideError();
    $('#success-alert').html(message);
    $('#success-alert').show();
}

function hideError() {
    $('#error-alert').hide();
}

function hideSuccess() {
    $('#success-alert').hide();
}

function showApps () {
    $("#apps").toggle();
    $("#overlay").toggle();
}

const deleteEntry = (game, table) => {
    fetch('/delete', { 
        method: 'POST', 
        headers: { "Content-Type": "application/json; charset=utf-8" }, 
        body: JSON.stringify({'table': table, 'id': game})
    })
    .then(res => res.json()) // parse response as JSON (can be res.text() for plain response)
    .then(response => {
        // here you do what you want with response
        console.log(response);

        if (response.success) {
            showSuccess(response.msg);
            hideError();
            document.querySelector('#' + table + "-" + game).remove();
        } else {
            showError(response.msg);
            hideSuccess();
        }
    })
    .catch(err => {
        console.log(err);

        showError('An error occured!');
        hideSuccess();
    });
};
</script>
{% endblock %}