{% extends "admin/admin_base.html" %}

{% block title %}Dashboard{% endblock title %}


{% block content %}
<div class="my-3 my-md-5">
    <div class="container">
        <div class="page-header">
            <h1 class="page-title">
                Dashboard
            </h1>
        </div>
        <div class="row row-cards row-deck">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Articles</h3>
                        <div class="card-options">
                            <a href="/admin/article/new" class="btn btn-primary btn-sm">New Article</a>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter text-nowrap">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Status</th>
                                <th>Title</th>
                                <th>View</th>
                                <th>Published Time</th>
                                <th>Tags</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for article in articles %}
                            <tr>
                                <td>{{ article.id }}</td>
                                <td>
                                    {% if article.published == false %}
                                    <span class="status-icon bg-warning"></span> Draw
                                    {% else %}
                                    <span class="status-icon bg-success"></span> Publised
                                    {% endif %}
                                </td>
                                <td>
                                    {{ article.title }}
                                    {% if article.published %}
                                    <a class="icon" target="_blank" href="//{{ setting.url }}/archives/{{ article.id }}"><i
                                        class="fe fe-send"></i></a>
                                    {% endif %}
                                    {% if article.url %}
                                    <br/>
                                    <span class="tag">{{ article.url }}</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ article.view }}
                                </td>
                                <td>{{ article.publish_at | date(format="%B %d, %Y") }}</td>
                                <td>
                                    <div class="tags">
                                        {% for key in article.keywords %}
                                        <span class="tag">{{ key }}</span>
                                        {% endfor %}
                                    </div>
                                </td>
                                <td class="action">
                                    <div style="display:flex;">
                                        <a class="icon" href="/admin/article/{{ article.id }}"><i
                                                class="fe fe-edit"></i></a>
                                        <form action="/admin/article/delete/{{ article.id }}" method="POST"
                                              id="delete_form_{{ article.id }}">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <a class="icon" href="javascript:{}"
                                               onclick="document.getElementById('delete_form_{{ article.id }}').submit(); return false;"><i
                                                    class="fe fe-x-square"></i></a>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        require(['jquery'], function () {
            $(document).ready(function () {

                function setCookie(name, value, days) {
                    var expires = "";
                    if (days) {
                        var date = new Date();
                        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                        expires = "; expires=" + date.toUTCString();
                    }
                    document.cookie = name + "=" + (value || "") + expires + "; path=/";
                }

                function getCookie(name) {
                    var nameEQ = name + "=";
                    var ca = document.cookie.split(';');
                    for (var i = 0; i < ca.length; i++) {
                        var c = ca[i];
                        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                    }
                    return null;
                }

                if (!getCookie('bottombar-hidden')) {
                    $('.js-bottombar').show();
                }

                $('.js-bottombar-close').on('click', function (e) {
                    $('.js-bottombar').hide();
                    setCookie('bottombar-hidden', 1, 7);

                    e.preventDefault();
                    return false;
                });
            });
        });
    </script>
</div>
{% endblock content %}