{% extends "tethys_portal/user/profile.html" %}

{% load django_bootstrap5 %}

{% block edit_button %}
<a href="{% url 'user:settings' %}" class="btn btn-secondary">Back</a>
{% endblock %}

{% block title %}{{ block.super }} - User Settings{% endblock %}

{% block styles %}
  {{ block.super }}
  {{ tethys.datatables_bs5.link_tag|safe }}
{% endblock %}

{% block profile_sections %}
<div class="profile-section">
  <div class="results">
    <table id="app_list" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>App Name</th>
          <th>Current Usage</th>
          <th>Manage Storage</th>
        </tr>
      </thead>
      <tbody>
        {% for app in apps %}
        <tr>
          <td>
            <a href="{% url app.index_url %}">{{ app.name }}</a>
          </td>
          <td>{{ app.current_use }}</td>
          <td>
            <a class="btn btn-danger btn-sm" href="{% url 'user:clear_workspace' app.root_url %}">Clear Workspace</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <div id="storage_summary" style="text-align: center;">
      <span class="fw-bold">Storage Summary:</span>
      <span class="value">{{ current_use }} of {{ quota|default:"&#8734;" }}</span>
    </div>
  </div>
</div>
{% endblock %}

{% block global_scripts %}
  {{ block.super }}
  {{ tethys.datatables.script_tag|safe }}
  {{ tethys.datatables_bs5.script_tag|safe }}
{% endblock %}

{% block scripts %}
  {{ block.super }}
  <script>
  $(document).ready(function() {
    $('#app_list').DataTable({
      "columnDefs": [
        { "orderable": false, "targets": 2 }
      ]
    });
  });
</script>
{% endblock %}