{% extends "ToDo/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% load static %}

<style>
    .big-list-item {
        font-size: 4ch;
    }
</style>

    <!--<div class="alert alert-success" role="alert">-->
    <!--    I have worked real hard for the past several weeks to make this app as robust as possible.-->
    <!--    We are now announcing the 2nd version! You NEED to read about it here: <a href="{% url 'new-v2' %}">Click me</a>-->
    <!--</div>-->


<div style="text-align: center; font-family: Cambria">
    <h1 style="font-size:10ch">Happy {{ today_name }}</h1>
    <h1 style="font-size:8ch; color:indianred">
        <i class="fas fa-smile-beam"></i>
            {{ request.user.username }}
        <i class="fas fa-smile-beam"></i>
    </h1>
</div>

<br><br><br><br><br>
{% if insights_highlight %}
    {% if request.user_agent.is_mobile %}
        <center><a href="{% url 'insights' %}" style="background-color: powderblue; color:palevioletred; text-decoration: none; font-size:4ch">Your Insights for previous week is now ready!</a></center>
    {% else %}
        <center><a href="{% url 'insights' %}" style="background-color: powderblue; color:palevioletred; text-decoration: none; font-size:6.2ch">Your Insights for previous week is now ready!</a></center>
    {% endif %}
    <br><br><br>
{% endif %}

<center><h2 style="font-size:6ch; font-style: oblique;">Get to work</h2></center>
<br>
<div class="content-section">
    <ul class="list-group">
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="{% url 'todo-important' %}">
                Important Tasks
            </a>
        </li>
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="{% url 'todo-next-up' %}">
                Next up for you
            </a>
        </li>
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="{% url 'todo-files' %}">
                Your files
            </a>
        </li>
    </ul>
</div>


<br><br><br>
<center><h2 style="font-size:6ch; font-style: oblique;">Your Lists:</h2></center>
<br>
<br>
<form method="POST">
    {% csrf_token %}
    <fieldset class="form-group dark-mode-assist">
        <legend class="border-bottom mb-4">New List</legend>
        {{ list_form|crispy }}
    </fieldset>
    <div class="form-group">
        <button class="btn btn-outline-info" type="submit">Add</button>
    </div>
</form>
<div class="content-section">
    <ul class="list-group">
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items">
            <a style="color:inherit; text-decoration: none; font-size:3ch; color:tomato" href="{% url 'tasklist-single-view-default' 'tasks' %}">
                Tasks
            </a>
        </li>
        {% for user_list in user_lists %}
            <li id="tasklist-item-{{ user_list.pk }}" class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items">
                <a style="color:inherit; text-decoration: none;" href="{% url 'tasklist-single-view' user_list.title user_list.pk %}">{{ user_list }}</a>
                <button data-toggle="modal" data-target="#exampleModalCenter{{ user_list.pk }}" style="float: right;" class="btn btn-outline-danger">
                    <i class="fa fa-trash"></i>
                </button>
            </li>

            <div class="modal fade" id="exampleModalCenter{{ user_list.pk }}" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content dark-mode-assist-section">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Confirm the deletion</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            Are you sure you want to delete this list permanently? All its todos will be deleted as well.
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button data-dismiss="modal" onclick="deleteItem('tasklist', {{ user_list.pk }})" type="submit"
                                class="btn btn-danger">Yes, I am sure</button>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </ul>
</div>

<br><br><br>
<center><h2 style="font-size:6ch; font-style: oblique;">More from us</h2></center>
<div class="content-section">
    <ul class="list-group">
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="https://github.com/arafat-ar13/Regular-ToDoList" target="_blank">
                GitHub
                <i class="fab fa-github"></i>
            </a>
        </li>
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="https://arafat-ar13.github.io/" target="_blank">
                About me
            </a>
        </li>
        <li class="hoverable-item list-group-item dark-mode-assist-section big-list-item colorful-list-items ">
            <a style="color:inherit; text-decoration: none;" href="{% url 'contact-me' %}">
                Contact Me
                <i class="fas fa-envelope"></i>
            </a>
        </li>
    </ul>
</div>


{% endblock content %}