{% extends "base.html" %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/job_details.css') }}">
<style>
    /*
    Max width before this PARTICULAR table gets nasty
    This query will take effect for any screen smaller than 760px
    and also iPads specifically.
    */
    @media only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {
        /*
        Label the data
        */
        td:nth-of-type(1):before {
            content: "Job Start datetime:\A";
        }

        td:nth-of-type(2):before {
            content: "Duration:";
        }

        td:nth-of-type(2):after {
            content: " (h:mm:ss)";
        }

        td:nth-of-type(3):before {
            content: "Status:";
        }

        td:nth-of-type(4):before {
            content: "Logfile:\A";
        }
    }

    .hidden {
        display: none;
    }
</style>
<div class="container content">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
                <div class="jumbotron">
                    <div class="row">
                        <div class="col-sm-12  rounded text-center">
                            <img src="static/img/arm80.png" alt=""><br/>
                            <strong>Welcome to your Automatic Ripping Machine<br></strong>
                        </div>
                    </div>
                    <br>
                    {% with pages=pages, page_name="route_history.history" %}
                        {% include "pagination.html" %}
                    {% endwith %}
                    <!-- Main Body -->
                    <div class="row">
                        <table class="table table-striped">
                            <caption>Previous rips</caption>
                            <thead class="tablesorterhead thead-dark">
                            <tr style="margin: 0 auto">
                                <th scope="col" style="cursor: pointer;">Title</th>
                                <th scope="col" style="cursor: pointer;">Start Time</th>
                                <th scope="col" style="cursor: pointer;">Duration</th>
                                <th scope="col" style="cursor: pointer;">Status</th>
                                <th scope="col" style="cursor: pointer;">Logfile</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for job in jobs %}
                            <tr>
                                <th scope="row" class="text-wrap"><a href="jobdetail?job_id={{ job.job_id }}">{{
                                    job.title|truncate(50, True) if job.title is not none else 'Title unknown' }}</a>
                                </th>
                                <td>{{ job.start_time.strftime(date_format) if job.start_time is not none }}</td>
                                <td class="hidden">{{ job.start_time if job.start_time is not none }}</td>
                                <td>{{ job.job_length }}</td>
                                <td class="{{ job.status }}"><img src="static/img/{{ job.status }}.png" height="30px"
                                                                  width="30px" alt="{{ job.status }}"
                                                                  title="{{ job.status }}"></td>
                                <td><a href="logs?logfile={{ job.logfile }}&mode=full">{{ job.logfile|truncate(50, True)
                                    if job.logfile is not none else 'Unknown logfile' }}</a></td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% with pages=pages, page_name="route_history.history" %}
                        {% include "pagination.html" %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    {% block footer %}{{ super() }}{% endblock %}
    {% block js %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/jquery.tablesorter.js') }}"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            $("table").tablesorter({});

        });
        activeTab("history");
    </script>

    {% endblock %}