{#
/**
 * @file
 * Template for the JSON:API Query Builder application.
 *
 * Available variables:
 * - base_url: The base URL of the JSON:API.
 */
#}

<div id="jsonapi-query-builder-root" data-base-url="{{ base_url }}">
  <div class="loading">
    <div class="loading-spinner" style="width: 50px; height: 50px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #3b82f6; animation: jsonapi-spin 1s linear infinite; margin-bottom: 20px;"></div>
    <h2 style="margin-top: 0; font-weight: 600; color: #1f2937; font-size: 1.5rem;">Loading JSON:API Query Builder</h2>
    <p style="color: #6b7280; max-width: 400px; margin: 10px auto;">The interface is initializing. If it doesn't load within a few seconds, please check your browser console for errors.</p>
  </div>
</div>

<style>
  @keyframes jsonapi-spin {
    to { transform: rotate(360deg); }
  }

  body.gin--dark-mode #jsonapi-query-builder-root .loading h2 {
    color: #e5e7eb;
  }

  body.gin--dark-mode #jsonapi-query-builder-root .loading p {
    color: #9ca3af;
  }

  body.gin--dark-mode #jsonapi-query-builder-root .loading-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
  }
</style>
