<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Backups</title>

  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Favicon -->
  <link rel="icon" href="">

  <!-- Bootstrap 4 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <style>

    .content {
      margin-top: 50px;
    }

  </style>

</head>
<body>

 <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col">
                <h2>SQL Backups</h2>
                    <table class="table-bordered table-striped table" id="sql">
                        <thead>
                            <tr>
                                <th>Date Modified</th>
                                <th>Version ID</th>
                                <th>Size</th>
                                <th>Download</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sql_entry in sql_versions %}
                                <tr>
                                    <td>{{ sql_entry.lastmodified }}</td>
                                    <td>{{ sql_entry.versionid }}</td>
                                    <td>{{ sql_entry.size }}</td>
                                    <td><a href="{% url 'download_backup' 'sql' sql_entry.versionid %}">Download</a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row">
                <div class="col">
                <h2>Data File Backups</h2>
                    <table class="table-bordered table-striped table" id="data">
                        <thead>
                            <tr>
                                <th>Date Modified</th>
                                <th>Version ID</th>
                                <th>Size</th>
                                <th>Download</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for sql_entry in data_versions %}
                                <tr>
                                    <td>{{ sql_entry.last_modified }}</td>
                                    <td>{{ sql_entry.version_id }}</td>
                                    <td>{{ sql_entry.size }}</td>
                                    <td><a href="{% url 'download_backup' 'data' sql_entry.versionid %}">Download</a></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

        <!-- /.row (main row) -->
      </div><!-- /.container-fluid -->
    </section>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

  <!-- Tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

  <!-- Bootstrap 4 -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</body>
</html>

