{% extends 'ui/base.html' %}

{% load static %}

{% block css %}
<link rel="stylesheet" href="{% static 'ui/button.css' %}">
<link rel="stylesheet" href="{% static 'ui/achievement.css' %}">
{% endblock %}

{% block js %}
<script src="{% static 'ui/helper.js' %}"></script>
<script src="{% static 'ui/button.js' %}"></script>
{% endblock %}

{% block body %}
<section class="section">
    <div class="columns">
        <div class="column">
        </div>
        <div class="button-column column">
            <div>
                <h1 class="title">
                    The Button
                </h1>
                <button class="button is-danger" id="BUTTON" data-action = "{% url 'button' %}">Press</button>
            </div>
            <div><br></div>
            <div>
                <h1 class="title" id="COUNT">{{ pressed }}</h1>
            </div>
            <div id="achievement" class="achievement">
                <div>
                    <div class="achievement-text"></div>
                </div>
            </div>
        </div>
        <div class="column achievment-column" id = "achievement-column">
            <div class="achievements-list" id="achievement-list">
                <h1 class="title">Achievements</h1>
                {% for key,value in achievement.items %}
                <div>{{ value }}</div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}