{% if authenticated %}
    {% extends "base.html" %}
{% else %}
    {% extends "support/base_simple.html" %}
{% endif %}
{% block content %}
    <div class="container-fluid h-100 mx-auto">
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
             aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Abandon this job ??</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p><span class="ui-icon ui-icon-alert" style="margin:12px 12px 20px 0;"></span>
                            <span id="m-body">This job will be abandoned. Are you sure?</span></p>
                    </div>
                    <div class="modal-footer">
                        <button id="save-no" type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                        <button id="save-yes" type="button" class="btn btn-primary">Yes</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 rounded text-center">
                <img src="static/img/arm80.png" alt="Automatic Ripping Machine">
                <p class="text-center">
                <h2>Welcome to your Automatic Ripping Machine</h2>
                </p>
            </div>
        </div>

        <div class="row h-100 mx-auto align-items-center">
            <div class="col-sm-12 mx-auto">
                <p class="text-center">
                <h5 class="text-center"><strong>Active Rips</strong></h5>
                </p>
            </div>
        </div>
        <div class="row h-100 align-items-center">
            <div class="col-md-12 mx-auto">
                <div id="joblist" class="card-deck"></div>
            </div>
        </div>
    </div>

    <div class="row" style="height: 30px;"></div>
    <p class="text-center">
        <h5 class="text-center"><strong>System Information</strong></h5>
    </p>
    {% include 'settings/sysinfo.html' %}

    <script type="application/javascript" src="static/js/common.js"></script>
    <script type="application/javascript" src="static/js/jobRefresh.js"></script>
    <script type="application/javascript">
    $(document).ready(function () {
        const intervalId = window.setInterval(refreshJobs, {{ armui_cfg['index_refresh'] }});
    });
</script>
{% endblock %}
{% block js %}{{ super() }}{% endblock %}