{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if warning %}
    <div class="alert alert-danger">
      <i class="fa fa-exclamation-circle"></i> {{ warning }}
    </div>
    {% endif %}
    {% if success %}
    <div class="alert alert-success">
      <i class="fa fa-check-circle"></i> {{ success }}
    </div>
    {% endif %}
    {% if update %}
    <div class="panel-body">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-log" data-toggle="tab">{{ tab_log }}</a></li>
        <li><a href="#tab-update" data-toggle="tab">{{ tab_update }}</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-log">
          <fieldset>
            <legend>{{ text_change }}</legend>
            <textarea wrap="off" rows="10" readonly class="form-control">{{ log }}</textarea>
          </fieldset>
        </div>
        <div class="tab-pane" id="tab-update">
          <div class="alert alert-info">
            <i class="fa fa-exclamation-circle"></i> {{ text_instructions }}
          </div>
          <fieldset>
            <legend>{{ text_update }}</legend>
            <div class="form-group">
              <label class="col-sm-2">{{ entry_progress }}</label>
              <div class="col-sm-10">
                <div id="progress-download" class="progress">
                  <div id="progress-bar" class="progress-bar"></div>
                </div>
                <div id="progress-text"></div>
              </div>
            </div>
            <div class="col-sm-10">
              <div class="form-group">
                <button type="button" id="button-update" data-loading-text="{{ text_loading }}" class="btn btn-success"><i class="fa fa-play"></i> {{ button_update }}</button>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend>{{ text_log }}</legend>
            <textarea id="log" wrap="off" rows="10" readonly class="form-control"></textarea>
          </fieldset>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
<script type="text/javascript"><!--
$('#button-update').on('click', function() {
  $('#progress-bar').css('width', '0%');
  $('#progress-bar').removeClass('progress-bar-danger progress-bar-success');
  $('#progress-text').html('{{ text_download }}');
  $('#log').append('{{ text_download }}' + "\n");

  $.ajax({
    url: 'index.php?route=tool/update/download&user_token={{ user_token }}&version={{ version }}',
    dataType: 'json',
    beforeSend: function() {
      $('#button-update').button('loading');
    },
    success: function(json) {
      if (json['error']) {
        $('#progress-bar').addClass('progress-bar-danger');
        $('#progress-text').html('<div class="invalid-tooltip">' + json['error'] + '</div>');
        $('#log').append(json['error'] + "\n");
      }

      if (json['text']) {
        $('#progress-bar').css('width', '20%');
        $('#progress-text').html(json['text']);
        $('#log').append(json['text'] + "\n");
      }

      if (json['next']) {
        next(json['next'], 1);
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      $('#log').append(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
});

function next(url, i) {
  i = i + 1;

  $.ajax({
    url: url,
    dataType: 'json',
    success: function(json) {
      $('#progress-bar').css('width', (i * 20) + '%');

      if (json['error']) {
        $('#progress-bar').addClass('progress-bar-danger');
        $('#progress-text').html('<div class="text-warning">' + json['error'] + '</div>');
        $('#log').append(json['error'] + "\n");

        $('#button-update').button('reset');
      }

      if (json['success']) {
        $('#progress-bar').addClass('progress-bar-success');
        $('#progress-text').html('<span class="text-success">' + json['success'] + '</span>');
        $('#log').append(json['success'] + "\n");

        $('#button-update').button('reset');
      }

      if (json['text']) {
        $('#progress-text').html(json['text']);
        $('#log').append(json['text'] + "\n");
      }

      if (json['next']) {
        next(json['next'], i);
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      $('#log').append(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
}
//--></script>
{{ footer }}