{% extends 'base.html' %}

{% block header %}Backing up ...{% endblock %}

{% block body %}

<p>
  Creating {{ backuptype }} backup at {{ backup_folder }}.
</p>
<p>
  <b>Don't refresh this page, or another backup process will be kicked off!</b>
</p>

<p id="backupResult" />

<p id="returnHome" style="visibility:hidden;"><a href="/">Back to home.</a></p>
<div id="failedBackup" style="visibility:hidden;">
  <p>Backup failed:
    <a href="/backup/backup">try again</a>,
    fix your <a href="/settings/index">backup settings</a>,
    or <a href="/backup/skip_this_backup">skip this backup</a>.
  </p>
</div>

<script>
  $(document).ready(function() {
    $.post('/backup/do_backup', { type: '{{ backuptype }}' })
      .done( function(msg) {
        $('#backupResult').text('Completed: ' + msg);
        $('#returnHome').css({ visibility: 'visible' })
      })
      .fail( function(xhr, textStatus, errorThrown) {
        const p = JSON.parse(xhr.responseText);
        const msg = "BACKUP ERROR: " + p.errmsg;
        $('#backupResult').html(msg.replace(/__BREAK__/g, '<br />'));
        $('#failedBackup').css({ visibility: 'visible' })
      });
  });
</script>

{% endblock %}
