<script>
  import { onMount } from 'svelte';
  import { update_html_title, fetch_content_into_element } from '../lib/api_utils.js';
  import { appState } from '../state/AppState.svelte.js';

  import Header from '../components/Header.svelte';

  let aStatusData = $state({});
  const configuration = Nominatim_Config;

  const endpoint_url = (typeof configuration.Nominatim_API_Endpoint === 'function') ?
                      configuration.Nominatim_API_Endpoint() :
                      configuration.Nominatim_API_Endpoint;

  function loaddata() {
    appState.fetchFromApi('status', { format: 'json' }, function (data) {
      aStatusData = data;
    });
    update_html_title('Server status');
  }
  onMount(loaddata);

  onMount(() => {
    fetch_content_into_element('theme/status-help.html', document.getElementById('status-help'));
  });
</script>

<Header/>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>Server status</h1>

      <div id="status-help" class="bg-secondary-subtle"></div>

      <dl>
        <dt>API Endpoint</dt>
        <dd><a href={endpoint_url}>{endpoint_url}</a></dd>

        <dt>Software version</dt>
        <dd>{aStatusData.software_version}</dd>

        <dt>Database version</dt>
        <dd>{aStatusData.database_version}</dd>

        <dt>Data last updated</dt>
        <dd>{aStatusData.data_updated}</dd>
      </dl>
    </div>
  </div>
</div>

<style>
  #status-help {
    margin: 2em 0;
  }
</style>