{# Define the columns #}
{% set columns = [
  {'name':'name',  'data':'name', 'title':_('Name'), 'className':'export text-nowrap all'},
  {'name':'usage', 'data':'usage', 'title':_('Usage'), 'className':'export'},
  {'name':'perm', 'data':'permission', 'title':_('Permission'), 'className':'export'},
  {'name':'owners', 'data':'owners', 'title':_('Owner'), 'className':'export', 'render': 'sspOwners', 'render_arg': currentuser.ROLE_ADMIN != currentuser.role },
  {'name':'manage', 'data':'manage_url', 'title':'', 'orderable':False, 'className': 'all', 'render':'sspManageButton'},
] %}
{# Define a custom button to request container #}
{% if user.username == username %}
  {% set buttons = [
      {'text': _('Request container'), 'extend': 'sspShowModal', 'target':'#modal-request-container', 'className': 'ssp-show-modal btn-primary'},
    ] %}
{% else %}
  {% set buttons = [] %}
{% endif %}
<DatatableCard id="compute-table" data={{ url_for('dashboard', 'compute.json', u=user.username) }} columns={{ columns }} buttons={{ buttons }} empty_message={{ _("No compute resources.") }} icon="bi-cpu" label={{ _("Compute") }} />
{# Modal dialog - Request container #}
{% if user.username == username %}
  <form method="post"
        action="{{ url_for('dashboard', 'request-container') }}">
    <Modal id="modal-request-container" title={{ _("Request Container") }} submit={{ _("Send request") }}>
    <p>
      {% trans %}This web form will automatically create a new ticket in your name and allow us to fast-track it for you.{% endtrans %}
    </p>
    <Fields form={{ request_compute_form }} />
    <p>
      {% trans %}Requests are usually fulfilled within 1 workday after submission if we don't have any questions.{% endtrans %}
    </p>
    </Modal>
  </form>
  <script>
      // When user select a type, update the prepend value of server_name
      $('#modal-request-container select[name="server_type"]').change(function() {
          const selectedServerType = $(this).find('option:selected');
          const prependValue = selectedServerType.data('prepend');
          $('input[name="server_group_name"], input[name="server_user_name"]').each(function() {
              $(this).closest('.input-group')
                  .find('.input-group-text')
                  .first()
                  .text(prependValue + '.');
          });
      });
  </script>
{% endif %}