<!DOCTYPE html>
<html>

<head>
  <title>Server Management - AIL</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">

  <!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">

  <!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script>

</head>
<body>

  {% include 'nav_bar.html' %}

	<div class="container-fluid">
		<div class="row">

			{% include 'settings/menu_sidebar.html' %}

			<div class="col-12 col-lg-10" id="core_content">

				<div class="card mb-3 mt-1">
					<div class="card-header text-white bg-dark pb-1">
						<h5 class="card-title">AIL-framework Status :</h5>
					</div>
					<div class="card-body">

            <div class="row">
              <div class="col-xl-6">
                <div class="card text-center border-secondary">
                  <div class="card-body px-1 py-0">
                    <table class="table table-sm">
                      <tbody>
                        <tr>
                          <td>AIL Version</td>
                          {%if ail_version is not none %}
                              <td>{{ail_version}}<a target="_blank" href="https://github.com/ail-project/ail-framework/releases/tag/{{ail_version}}" class="text-info"><small> (release note)</small></a></td>
			                    {%else%}
                              <td>{{git_metadata['current_branch']}}</td>
                          {%endif%}
                        </tr>
                        <tr
                        {%if git_metadata['current_branch'] != 'master'%}
                          class="table-danger"
                        {%endif%}
                        >
                          <td>Current Branch</td>
                          <td>
                            {%if git_metadata['current_branch'] != 'master'%}
                              <i class="fas fa-times-circle text-danger" data-toggle="tooltip" data-placement="top" title="Please checkout the master branch"></i>&nbsp;
                            {%endif%}
                            {{git_metadata['current_branch']}}
                          </td>
                        </tr>
                          <tr
                          {%if git_metadata['new_git_update_available']%}
                            class="table-warning"
                          {%endif%}
                          >
                            <td>Current Commit ID</td>
                            <td>
                              {%if git_metadata['new_git_update_available']%}
                                <i class="fas fa-exclamation-triangle text-secondary" data-toggle="tooltip" data-placement="top" title="A New Update Is Available"></i>&nbsp;
                              {%endif%}
                              {{git_metadata['current_commit']}}
                            </td>
                          </tr>
                          <tr
                          {%if git_metadata['new_git_version_available']%}
                            class="table-danger"
                          {%endif%}
                          >
                            <td>Current Tag</td>
                            <td>
                              {%if git_metadata['new_git_version_available']%}
                                <i class="fas fa-exclamation-circle text-danger" data-toggle="tooltip" data-placement="top" title="A New Version Is Available"></i>&nbsp;&nbsp;
                              {%endif%}
                              {{git_metadata['last_local_tag']}}
                            </td>
                          </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              <div class="col-xl-6">
                <div class="card text-center border-success" id="card_progress">
                  <div class="card-body" id="card_progress_body">
                    <h5 class="card-title">Backgroud Update: <span id="backgroud_update_version"></span></h5>
                    <div class="progress">
                      <div class="progress-bar bg-danger" role="progressbar" id="update_global_progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <hr class="my-1">
                    Updating: <strong id="backgroud_update_name"></strong> ...
                    <div class="progress">
                      <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" id="update_background_progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="text-danger" id="update_error_div">
                      <hr>
                      <h5 class="card-title"><i class="fas fa-times-circle text-danger"></i> Update Error:</h5>
                      <p id="update_error_mess"></p>
                    </div>
                  </div>
                </div>
              </div>

            </div>

					</div>
				</div>

        {%if git_metadata['new_git_version_available']%}
          <div class="alert alert-danger" role="alert">
            <h4 class="alert-heading">New Version Available!</h4>
            <hr class="my-0">
            <p>A new version is available, new version: <strong>{{git_metadata['last_remote_tag']}}</strong></p>
            <a target="_blank" href="https://github.com/ail-project/ail-framework/releases/tag/{{git_metadata['last_remote_tag']}}"> Check last release note.</a>
          </div>
        {%endif%}

        {%if git_metadata['new_git_update_available']%}
          <div class="alert alert-warning" role="alert">
            <h4 class="alert-heading">New Update Available!</h4>
            <hr class="my-0">
            <p>A new update is available, new commit ID: <strong>{{git_metadata['last_remote_commit']}}</strong></p>
            <a target="_blank" href="https://github.com/ail-project/ail-framework/commit/{{git_metadata['last_remote_commit']}}"> Check last commit content.</a>
          </div>
        {%endif%}

    	</div>
		</div>
	</div>

</body>

<script>

var to_refresh

$(document).ready(function(){
  $("#nav_server_status").addClass("active");
	$("#nav_server").removeClass("text-muted");
  $( window ).on("focus", function() {
			to_refresh = true
			refresh_update_status();
	});
	$( window ).on("blur", function() {
			to_refresh = false
	});

	to_refresh = true
	refresh_update_status();
} );

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}

function refresh_update_status(){

  $.getJSON("{{ url_for('settings_b.get_background_update_metadata_json') }}", function(data){
    if(! jQuery.isEmptyObject(data)){
      $('#card_progress').show();
      $('#backgroud_update_version').text(data['version']);
      $('#backgroud_update_name').text(data['script']);

      let progress_label = data['nb_completed'] + "/" + data['nb_update']
      $('#update_global_progress').attr('aria-valuenow', data['progress']).width(data['progress']+'%').text(progress_label);
      $('#update_background_progress').attr('aria-valuenow', data['script_progress']).width(data['script_progress']+'%').text(data['script_progress']+'%');

      if(data['error']){
        $('#update_error_div').show();
        $('#update_error_mess').text(data['error']);
        $('#card_progress').removeClass("border-success");
        $('#card_progress').addClass("border-danger");
      } else {
        $('#update_error_div').hide();
        $('#card_progress').removeClass("border-danger");
        $('#card_progress').add("border-success");
      }
    } else {
      $('#card_progress').hide();
      clearInterval(progress_interval);
    }
  });

  if (to_refresh) {
    setTimeout("refresh_update_status()", 10000);
	}

}

refresh_update_status();
//Interval
var progress_interval = setInterval(function(){
	refresh_update_status()
}, 4000);

</script>

</html>