<head>
  <link rel='stylesheet' href='/technical-styles/applications.css' />
  <script src='/technical-scripts/application-listing.js' defer></script>
</head>

<main>
<section>
  <div class="container-fluid col-lg-11 applicationspage-container" id="applicationsContainer">
    <!-- Create Project Button -->
    <div class="card create-project-card">
      <a type="button" class="btn create-project-button" href="{{baseUrl}}/applications/create">
        <div class="create-project-content">
          <span class="plus-icon">+</span>
          <span class="create-text">New Application</span>
        </div>
      </a>
    </div>

    <!-- Application Cards -->
    {{#applicationsMetadata}}
    <div class="card application-card" id="app-card-{{applicationId}}" data-name="{{name}}">
      <div class="application-card-body">
        <h5 class="application-card-title">
          <a href="{{../baseUrl}}/applications/{{applicationId}}" class="application-name-link">
            {{name}}
          </a>
        </h5>
        <div class='row list-items'>
          <div class='applicationlist-tags'>
            {{#if (eq status 'APPROVED')}}
            <span class='badge badge-custom1'>{{status}}</span>
            {{else}}
              <span class='badge badge-custom2'>{{status}}</span>
            {{/if}}
            <span class='badge badge-custom3'>Owner:
            {{owner}}</span>
          </div>
        </div>
        <div class='application-card-meta'>
          <p>
            <i class='bi bi-grid'></i>
              Subscriptions:
              {{subscriptionCount}}
          </p>
          <p>
            <i class='bi bi-speedometer2'></i>
              Throttling Policy:
              {{throttlingPolicy}}
          </p>
        </div>
        <div class="application-card-actions">
          <button
            type="button"
            class="btn application-btn-icon edit-button"
            title="Edit"
            onclick="window.location.href='{{../baseUrl}}/applications/{{applicationId}}/edit'"
          >
            <i class='bi bi-pencil-fill'></i>
          </button>
          <button
            type="button"
            class="btn application-btn-icon delete-button"
            title="Delete"
            onclick="openDeleteModal('{{applicationId}}', '')"
          >
            <i class="bi bi-trash-fill"></i>
          </button>
        </div>
      </div>
    </div>
    {{/applicationsMetadata}}
  </div>
</section>
</main>
