{% extends "layout.html" %}
{% block container %}
          <div class="card" id="data-el-4">
            <div class="card-body ov-auto">
              <form id='download_form' action="/data/download-from-bucket" method="post">
	      {% if 'no_bucket_configuration' in command_status.keys() %}
	      <span class="text-dark">{{ command_status['no_bucket_configuration']|safe }}</span>
	      {% else %}
	      <h5 class="card-title">Download From Bucket ({{ sg_status['bucket_path']|safe }})</h5>
	      <h5>Backup Files</h5>
	      {% if command_status['backup_files'] %}
	      <div class="table-responsible">
	      <table class="table">
		      <tr><th></th><th>Date</th><th>Size</th><th>Filename</th></tr>
	      {% for b in command_status['backup_files'] %}
	      <tr>
		      <td><input name="filename" type="radio" class="" value="{{ b['name'] }}" {% if loop.index0 == 0 %}checked{% endif %}></td>
	      <td>{{ b['updated'] }}</td>
	      <td>{{ b['size'] }}</td>
	      <td style="word-wrap: break-word">{{ b['name'] }}</td>
	      </tr>
	      {% endfor %}
	      </table>
	      </div>
              <div class="row" style="margin-top: 25px">
                <div class="col"><input class="form-control" type="text" placeholder="Data Admin-ID" id="did" name="did"></div>
                <div class="col"><input class="form-control" type="password" placeholder="DMK" id="dmk" name="dmk"></div>
              </div>
              <div class="input-group" style="margin-top: 10px">
                <input id="downloadStatus" type="text" class="form-control" placeholder="{{ command_status['download_status'] }}" readonly>
                <div class="input-group-append">
                  <input type="button" class="btn btn-dark text-white" value="Download" onClick="mirror_confirm('download_form')">
                </div>
              </div>
	      {% else %}
              <div class="alert alert-danger" role="alert">
                 Error: No Backup File Found
              </div>
              {% endif %}	
	      </form>
	    </div>
          </div>
          <div class="card scroll" id="data-el-4" style="height: 25vh;">
	    <h5 class="card-title" style="margin: 5px;">Transfer Results</h5>
<pre style="margin: 5px; line-height: 100%">
{% for i in rsync_results %}{{ i }}{% endfor %}
</pre>
          </div>
          {% endif %}
<script>
	window.onload = function() {
		setTimeout(function() {
			var downloadStatus = document.getElementById('downloadStatus').getAttribute('placeholder');
			if (downloadStatus && downloadStatus.trim() !== "") {
			    alert(downloadStatus);
			}
		}, 300);
	}
	     function mirror_confirm(method) {
		if (method == "upload_form") {
			message = "Caution: This option will copy all data from the encrypted TG repository to the bucket and delete all other data in the bucket that is not in the repository. Please exercise caution: It's possible to delete large amounts of data accidentally from your bucket.";
		} else if (method == 'download_form') {
			message = "Caution: This option will copy all data from the bucket to the TG repository and delete all other data in the TG repository that is not in the bucket. Please exercise caution: It's possible to delete large amounts of data accidentally that has been previously downloaded.";
		} else if (method == 'smb_form') {
			message = "Security Warning: The SMB protocol is not a secure protocol. Hence you should select the install option only when your TGR is installed behind your firewall.";
		}
		if ($('#' + method + ' select').val() == 'mirror' || method == 'smb_form') {
			bootbox.confirm({
			    message: message,
			    buttons: {
				confirm: {
				    label: 'Yes',
				    className: 'btn-success'
				},
				cancel: {
				    label: 'No',
				    className: 'btn-danger'
																    }
			    },
			    callback: function (result) {
				if (result == true) {
					showWaitingScreen();
					$('#' + method).submit();
				}
			    }
			});
		} else {
		  showWaitingScreen();
		  $('#' + method).submit();
		}
	     }
</script>
{% endblock %}