<!--
=========================================================
Material Dashboard - v2.1.2
=========================================================

Product Page: https://www.creative-tim.com/product/material-dashboard
Copyright 2020 Creative Tim (https://www.creative-tim.com)
Coded by Creative Tim
=========================================================
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        Django Custom Log Viewer
    </title>
    <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport'/>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- CSS Files -->
    <link href="{% static 'log_viewer/css/material-dashboard.min.css' %}?v=2.1.2" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-html5-2.0.1/fc-4.0.1/fh-3.2.0/sc-2.0.5/sb-1.3.0/datatables.min.css"/>
    <style>
        .log-table td {
            vertical-align: top !important;
        }
    </style>
{#    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>#}
    {% block styles %}{% endblock %}
</head>

<body class="">
<div class="wrapper ">
    <div class="sidebar" data-color="{% block theme %}purple{% endblock %}" data-background-color="white"
         data-image="{% static 'log_viewer/img/sidebar-1.jpg' %}">
        <!--
          Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
          Tip 2: you can also add an image using data-image tag
        -->
        <div class="logo">
            <a href="{% url 'log_home' %}" class="simple-text logo-normal">{{ site_name }} Logs</a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav">
                {% for log in logs %}
                    <li class="nav-item active  ">
                        <a class="nav-link" href="?name={{ log }}">
                            <i class="material-icons">description</i>
                            <p>{{ log }}</p>
                        </a>
                    </li>
                {% empty %}
                    <h3 class="text-danger text-center">You have no logs</h3>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="main-panel">
        {% if columns %}
            {% include 'log_viewer/log_body.html' %}
        {% else %}
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="alert alert-warning text-center">
                                <span>Select a log file to view logs</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <footer class="footer">
            <div class="container-fluid">
                <div class="copyright float-right">
                    made with <i class="fa fa-heart"></i> by
                    <a href="https://github.com/yusufoguntola" class="font-weight-bold" target="_blank">Yusuf
                        Oguntola</a>
                </div>
            </div>
        </footer>
    </div>
</div>
<!--   Core JS Files   -->
<script src="{% static 'log_viewer/js/jquery.min.js' %}"></script>
<script src="{% static 'log_viewer/js/popper.min.js' %}"></script>
<script src="{% static 'log_viewer/js/bootstrap-material-design.min.js' %}"></script>
<script src="{% static 'log_viewer/js/perfect-scrollbar.jquery.min.js' %}"></script>
<script type="text/javascript"
        src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-html5-2.0.1/fc-4.0.1/fh-3.2.0/sc-2.0.5/sb-1.3.0/datatables.min.js"></script>
<script>
    $(document).ready(function () {
        $('.datatable').DataTable();
    });

    function switchLog() {
        $('#change-log-form').submit();
    }
</script>
{#<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>#}
{#<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>#}
{#<script>#}
{#    $(function () {#}
{#        $('#date-range').daterangepicker({#}
{#            opens: 'left'#}
{#        }, function (start, end, label) {#}
{#            console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));#}
{#        });#}
{#    });#}
{#</script>#}
{% block scripts %}{% endblock %}
</body>

</html>