<div class="card shadow h-100">
  {# Card header #}
  <div class="card-header d-flex align-items-center">
    <div class="col h5 mb-0">
      <Icon value="bi-diagram-3-fill" />
      {% trans %}Network{% endtrans %}
    </div>
    <div>
      {% set clipboard_network -%}
        # {% trans %}Network{% endtrans +%}
        {% trans %}VPN{% endtrans %}: {{ user.vpn_status.label }}
        {% trans %}WLAN{% endtrans %}: {{ _("enabled") if user.wlan_enabled else _('disabled') }}
      {% endset %}
      <CopyButton class="d-print-none" text={{ clipboard_network }} label={{ _("Copy") }} />
    </div>
  </div>
  {# Card body #}
  <div class="card-body">
    <dl class="row mb-0">
      <dt class="col-4">
        <a target="_blank" href="{{ vpn_info_url }}" class="ssp-external">{% trans %}VPN{% endtrans %}</a>
      </dt>
      <dd class="col-8">
        {# Alter status based on MFA as it's required for VPN. #}
        <EnabledBadge value={{ user.vpn_status }} />
        {% if user.username == username and user.vpn_status == user.VPN_DISABLED %}
          {# Display a request button if VPN is not enabled. #}
          <button type="button"
                  class="btn btn-primary btn-sm float-end d-print-none ssp-show-modal"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-request-access"
                  data-resource="VPN">{% trans %}Request access{% endtrans %}</button>
        {% endif %}
      </dd>
      <dt class="col-4">
        <a target="_blank" href="{{ wlan_info_url }}" class="ssp-external">{% trans %}WLAN{% endtrans %}</a>
      </dt>
      <dd class="col-8">
        <EnabledBadge value={{ user.wlan_enabled }} />
        {% if not user.wlan_enabled and user.username == username %}
          <button type="button"
                  class="btn btn-primary btn-sm float-end d-print-none ssp-show-modal"
                  data-bs-toggle="modal"
                  data-bs-target="#modal-request-access"
                  data-resource="WLAN">{% trans %}Request access{% endtrans %}</button>
        {% endif %}
      </dd>
    </dl>
  </div>
</div>
