{% extends "../base_info.html" %}

{% block subheader %}
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Task</li>
        <li class="breadcrumb-item active">{{task_id}}</li>
    </ol>
</div>
{% end %}

{% block body %}
<div id="toolbar-fluid" class="fluid">
    <div id="toolbar" class="btn-group btn-group-sm float-right" role="group" aria-label="toolbar">
        <button id="btn-rerun" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-play-circle" title="rerun" aria-hidden="true"></span>
        </button>
        <button id="btn-recover" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-circle-check" title="recover" aria-hidden="true"></span>
        </button>
        <button id="btn-stop" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-media-stop" title="stop" aria-hidden="true"></span>
        </button>
        <button id="btn-download" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-arrow-circle-bottom" title="download" aria-hidden="true"></span>
        </button>
        <button id="btn-refresh" type="button" class="btn btn-light" onclick="this.blur();">
            <span class="oi oi-reload" title="refresh" aria-hidden="true"></span>
        </button>
    </div>
</div>
<div id="info-row" class="row">
    <div id="task-info" class="col">
        <h5 id="task-info-title">Information</h5>
        <pre id="task-info-json"></pre>
    </div>
    <div id="task-running-info" class="col">
        <h5 id="task-running-info-title">Running Information</h5>
        <pre id="task-running-info-json"></pre>
    </div>
</div>
<div id="task-rerun-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-rerun" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Rerun Task</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>Do you want to rerun this task?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-task-rerun" type="button" class="btn btn-light" onclick="this.blur();">Run</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="task-recover-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-recover" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Recover Task</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>Do you want to recover this task?</p>
                </div>
                <div class="modal-footer">
                    <button id="btn-task-recover" type="button" class="btn btn-light" onclick="this.blur();">Recover</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="task-stop-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-stop" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Stop Task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group col-sm-12">
                            <label for="stop_signal"><p>Do you want to stop this task with signal below?</p></label>
                            <div class="center-stop-signal col-sm-12">
                                <select name="stop_signal" class="form-control form-control-sm col-sm-2" id="stop_signal">
                                    <option selected value="-9">-9</option>
                                    <option value="-15">-15</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-task-stop" type="button" class="btn btn-light" onclick="this.blur();">Stop</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="task-download-modal" class="modal fade" tabindex="-1" role="dialog">
    <form id="form-download" class="form-horizontal" enctype="multipart/form-data">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Download Workspace</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="action-name">Action Name</label>
                        <div class="input-group mb-3" name="action-name" id="action-name">
                            <select class="custom-select" id="action-name">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-task-download" type="button" class="btn btn-light" onclick="this.blur();">Download</button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="loading_modal" data-backdrop="static" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Loading ...</h5>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% end %}

{% block javascript %}
<link href="{{ static_url('css/common.css') }}" rel="stylesheet" >
<link href="{{ static_url('css/task_info.css') }}" rel="stylesheet" >
<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/task_info.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        TaskInfoInit('{{manager_host}}', '{{task_id}}');
    });
</script>
{% end %}
