<!-- <script src="https://code.jquery.com/jquery-3.5.0.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.0/readmore.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var lineHeight = 20;
        var lines = 6;
        $('.card-text').readmore({
            speed: 1000,
            moreLink: '<a href="#" role="button" name="readmore" class="btn btn-info">Read more</a>',
            lessLink: '<a href="#" role="button" name="readless" class="btn btn-secondary">Read less</a>',
            collapsedHeight: lineHeight * lines,
            afterToggle: function(trigger, element, expanded) {
                if(!expanded) {
                    $('html, body').animate({ scrollTop: element.offset().top }, {duration: 1000 });
                }
            }
        });

        $('b[name="priority"]').filter(function () {
            return $(this).text() === 'Low';
        }).css('color', 'green');

        $('b[name="priority"]').filter(function () {
            return $(this).text() === 'Medium';
        }).css('color', 'orange');

        $('b[name="priority"]').filter(function () {
            return $(this).text() === 'High';
        }).css('color', 'red');

        $('b[name="status"]').filter(function () {
            return $(this).text() === 'To do';
        }).css('color', 'blue');

        $('b[name="status"]').filter(function () {
            return $(this).text() === 'In progress';
        }).css('color', 'orange');

        $('b[name="status"]').filter(function () {
            return $(this).text() === 'Done';
        }).css('color', 'green');

        $('div[name="note"]').filter(function () {
            return $(this).find('b[name="status"]').text() === 'To do';
        }).children('div[name="header"]').addClass('bg-primary');

        $('div[name="note"]').filter(function () {
            return $(this).find('b[name="status"]').text() === 'In progress';
        }).children('div[name="header"]').addClass('bg-warning');

        $('div[name="note"]').filter(function () {
            return $(this).find('b[name="status"]').text() === 'Done';
        }).children('div[name="header"]').addClass('bg-success');

    });
</script>
<section>
    <div class="container col-lg-6 col-md-6 col-sm-12 text-center justify-content-center">
        <hr><h1>Dashboard</h1><hr>
        <p>Welcome back, <a href="/profile"><%= user.login %></a>!</p>
        <% if(notes.length > 0) { %>
            <a href="/dashboard/note/create" role="button" class="btn btn-primary col-12 col-sm-12 col-md-8 col-lg-4">Create new note</a>
        <% } %>
        <%- include ('./partials/messages') %>
    </div>
</section>
<section>
    <div class="container-fluid col-lg-6 col-md-6 col-sm-12 justify-content-center text-center">
        <% var i, row; %>
        <% if(notes.length === 0) { %>
            <div class="jumbotron jumbotron-fluid bg-white text-center">
                <div class="container">
                  <h1 class="display-4">Ooops!</h1>
                  <p class="lead">You have no notes available. Try to add some first:</p>
                  <a href="/dashboard/note/create" role="button" class="btn btn-primary col-6">Create new note</a>
                </div>
            </div>
        <% } else { %>
            <h2 class="mt-5 mb-3 text-left">Your notes:</h2><hr>
        <% } %>
    </div>
    <div class="container-fluid col-lg-12 col-md-12 col-sm-12 justify-content-center note-grid">
        <% for(i = 0; i < notes.length; i++) { %>
            <div class="card mb-3 note" name="note">
                <div class="card-header text-center text-white" name="header">
                    <p style="font-weight: bold; font-size: 20px;" class="mt-2"><%- notes[i].title %></p>
                    <p style="font-style: italic; font-size: 12px;" class="mt-2">Created at: <%- notes[i].created_at %></p>
                </div>                    
                <div class="card-body flex-column justify-content-center">
                    <p style="float: left;" name="priority" >Priority: <b name="priority"><%- notes[i].priority %></b></p>
                    <p style="float: right;" name="status" >Status: <b name="status"><%- notes[i].status %></b></p><br />
                    <hr><p class="card-text text-justify justify-content-center" style="white-space: pre-wrap; overflow: hidden;" id="note"><%- notes[i].body %></p><hr />
                    <div class="container d-flex flex-row col-2 justify-content-center">
                        <a href="/dashboard/note/edit/<%- notes[i]._id %>" role="button" class="btn btn-success mr-1">Edit</a>
                        <a href="/dashboard/note/delete/<%- notes[i]._id %>" data-method="delete" role="button" class="btn btn-danger">Delete</a>
                    </div>
                </div>
            </div>
        <% } %>
    </div>
</section>