{% extends "en-us/PageLayout.htm" %}
{%- block htmTitlePageLayout %}
{%- block htmTitleProjectPage %}
    <title>{{ result.objectTitle }}</title>
{%- endblock htmTitleProjectPage %}
{%- endblock htmTitlePageLayout %}

{%- block htmStylesPageLayout %}
{{ super() }}
    <link rel="stylesheet" href="{{ staticBaseUrl }}/css/en-us/search/project/Project.css"/>
{%- block htmStylesProjectPage %}
{%- endblock htmStylesProjectPage %}
{%- endblock htmStylesPageLayout %}

{%- block htmStylePageLayout %}
      :root {
        --site-results-number-of-columns: 3;
      }
{{ super() }}
{%- block htmStyleProjectPage %}
{%- endblock htmStyleProjectPage %}
{%- endblock htmStylePageLayout %}

{%- block htmScriptsPageLayout %}
{{ super() }}
{%- block htmScriptsProjectPage %}
    <script src="{{staticBaseUrl}}/js/en-us/search/project/Project.js"></script>
    <script type="module" src="{{staticBaseUrl}}/js/en-us/search/project/ProjectSearchPage.js"></script>
    <script type="module" src="{{staticBaseUrl}}/js/en-us/search/project/ProjectEditPage.js"></script>
    <script src="{{staticBaseUrl}}/js/en-us/search/hub/Hub.js"></script>
    <script src="{{staticBaseUrl}}/js/en-us/search/cluster/Cluster.js"></script>
{%- endblock htmScriptsProjectPage %}
{%- endblock htmScriptsPageLayout %}

{%- block htmScriptPageLayout %}
{%- block htmScriptProjectPage %}
    <script>

      function jsWebsocketProject(projectResource, vars, $response) {
{%- block jsWebsocketProjectPage %}{%- endblock %}
      }

      function jsTooltipProject(e, feature) {
{%- block jsTooltipProjectPage %}{%- endblock %}
      }

      function htmTooltipProject(feature, layer) {
        return `{%- block htmTooltipProjectPage %}
<h3><i class="{{ classIconCssClasses }}  "></i><a href="${quoteattr(feature.properties.editPage)}">${feature.properties.objectTitle}</a></h3>
{%- endblock htmTooltipProjectPage %}`;
      }
    </script>
    <script type="module">
{% if DEFAULT_MAP_LOCATION is defined %}
      window.DEFAULT_MAP_LOCATION = { type: 'Point', coordinates: [ {{ DEFAULT_MAP_LOCATION.coordinates[0] }}, {{ DEFAULT_MAP_LOCATION.coordinates[1] }} ]};
{% endif %}
{% if DEFAULT_MAP_ZOOM is defined %}
      window.DEFAULT_MAP_ZOOM = {{ DEFAULT_MAP_ZOOM }};
{% endif %}
      window.DEFAULT_ZONE_ID = '{{ defaultZoneId }}';
      Promise.all([
        customElements.whenDefined('wa-button')
        , customElements.whenDefined('wa-input')
      ]).then(() => {

        var projectResource = {% if result.projectResource is defined %}{{ result.projectResource | tojson }}{% else %}null{% endif %};

        if(projectResource == null) {
          document.querySelector('#grid-toggle-details')?.addEventListener('click', () => {
            document.querySelector('#site-results-grid').classList.remove('grid-mode-list', 'grid-mode-card');
            document.querySelector('#site-results-grid').classList.add('grid-mode-details');
          });
          document.querySelector('#grid-toggle-list')?.addEventListener('click', () => {
            document.querySelector('#site-results-grid').classList.remove('grid-mode-details', 'grid-mode-card');
            document.querySelector('#site-results-grid').classList.add('grid-mode-list');
          });
          document.querySelector('#grid-toggle-card')?.addEventListener('click', () => {
            document.querySelector('#site-results-grid').classList.remove('grid-mode-details', 'grid-mode-list');
            document.querySelector('#site-results-grid').classList.add('grid-mode-card');
          });
        } else {
          var o = document.querySelector('.pageForm .result')?.value;
          if(o)
            window.result = JSON.parse(o);
        {% if result.projectResource is defined %}
          function relate_hubResource(event) {
            suggestProjectHubResource(
                event.target.value ? [ { 'name': 'q', 'value': 'objectSuggest:' + event.target.value }
                , { 'name': 'rows', 'value': '10' }
                , { 'name': 'fl', 'value': 'classCanonicalName,hubResource,pk,editPage,objectTitle' } ] : [{%- if result.hubResource is defined %}{'name':'fq','value':'hubResource:{{ result.hubResource }}'}{%- else %}{%- endif %}]
                , document.querySelector('#' + event.target.getAttribute('data-list'))
                , window.result.projectResource
                , window.result.hubResource
                , true
                );
          }
          document.querySelector('#POST_hubResource')?.addEventListener('input', relate_hubResource);
          document.querySelector('#POST_hubResource')?.addEventListener('focus', relate_hubResource);
          document.querySelector('#PATCH_hubResource')?.addEventListener('input', relate_hubResource);
          document.querySelector('#PATCH_hubResource')?.addEventListener('focus', relate_hubResource);
          document.querySelector('#Page_hubResource')?.addEventListener('input', relate_hubResource);
          document.querySelector('#Page_hubResource')?.addEventListener('focus', relate_hubResource);
          {% if "PATCH" in scopes %}
          suggestProjectHubResource([{'name':'fq','value':'hubResource:' + window.result.hubResource}], document.querySelector('#listProjectHubResource_Page'), window.result.projectResource, window.result.hubResource, true);
          {% else %}
          {% if "GET" in scopes %}
          suggestProjectHubResource([{'name':'fq','value':'hubResource:' + window.result.hubResource}], document.querySelector('#listProjectHubResource_Page'), window.result.projectResource, window.result.hubResource, true);
          {% else %}
          suggestProjectHubResource([{'name':'fq','value':'hubResource:' + window.result.hubResource}], document.querySelector('#listProjectHubResource_Page'), window.result.projectResource, window.result.hubResource, false);
          {% endif %}
          {% endif %}
          function relate_clusterResource(event) {
            suggestProjectClusterResource(
                event.target.value ? [ { 'name': 'q', 'value': 'objectSuggest:' + event.target.value }
                , { 'name': 'rows', 'value': '10' }
                , { 'name': 'fl', 'value': 'classCanonicalName,clusterResource,pk,editPage,objectTitle' } ] : [{%- if result.clusterResource is defined %}{'name':'fq','value':'clusterResource:{{ result.clusterResource }}'}{%- else %}{%- endif %}]
                , document.querySelector('#' + event.target.getAttribute('data-list'))
                , window.result.projectResource
                , window.result.clusterResource
                , true
                );
          }
          document.querySelector('#POST_clusterResource')?.addEventListener('input', relate_clusterResource);
          document.querySelector('#POST_clusterResource')?.addEventListener('focus', relate_clusterResource);
          document.querySelector('#PATCH_clusterResource')?.addEventListener('input', relate_clusterResource);
          document.querySelector('#PATCH_clusterResource')?.addEventListener('focus', relate_clusterResource);
          document.querySelector('#Page_clusterResource')?.addEventListener('input', relate_clusterResource);
          document.querySelector('#Page_clusterResource')?.addEventListener('focus', relate_clusterResource);
          {% if "PATCH" in scopes %}
          suggestProjectClusterResource([{'name':'fq','value':'clusterResource:' + window.result.clusterResource}], document.querySelector('#listProjectClusterResource_Page'), window.result.projectResource, window.result.clusterResource, true);
          {% else %}
          {% if "GET" in scopes %}
          suggestProjectClusterResource([{'name':'fq','value':'clusterResource:' + window.result.clusterResource}], document.querySelector('#listProjectClusterResource_Page'), window.result.projectResource, window.result.clusterResource, true);
          {% else %}
          suggestProjectClusterResource([{'name':'fq','value':'clusterResource:' + window.result.clusterResource}], document.querySelector('#listProjectClusterResource_Page'), window.result.projectResource, window.result.clusterResource, false);
          {% endif %}
          {% endif %}
        {% endif %}
        }
        var l = document.querySelector('.pageForm .listProject')?.value;
        if(l)
          window.listProject = JSON.parse(l);
        window.varsFq = JSON.parse('{{ toJsonObjectStringInApostrophes(varsFq) }}');
        window.varsRange = JSON.parse('{{ toJsonObjectStringInApostrophes(varsRange) }}');
        window.defaultRangeVar = '{{ defaultRangeVar }}';
        pageGraphProject();
        {% for key, value in varsQ.items() %}

        document.querySelector('#qProject_{{ key }}')?.addEventListener('wa-{% if var == 'objectSuggest' %}keyup{% else %}change{% endif %}', event => {
          qChange('Project', event.target, document.querySelector('#qProjectDiv_{{ key }}'));
        });
        {% endfor %}

        document.querySelector('#qProject_rows')?.addEventListener('change', event => {
          paramChange('Project', event.target, document.querySelector('#qProjectDiv_rows'));
        });

        document.querySelector('#qProject_start')?.addEventListener('change', event => {
          paramChange('Project', event.target, document.querySelector('#qProjectDiv_start'));
        });


        var submitForm_patchProject = document.querySelector('#htmForm_patchProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_patchProject')?.addEventListener('click', event => {
          event.preventDefault();
          patchProject(null, document.querySelector('#htmForm_patchProject'), document.querySelector('#htmFormButton_patchProject'), event.target.getAttribute('data-projectResource'));
          return false;
        });

        var submitForm_postProject = document.querySelector('#htmForm_postProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_postProject')?.addEventListener('click', event => {
          event.preventDefault();
          postProject(document.querySelector('#htmForm_postProject')
          , document.querySelector('#htmFormButton_postProject')
          , (json, target) => {
            window.location.href = json.editPage;
          });
          return false;
        });

        var submitForm_deleteProject = document.querySelector('#htmForm_deleteProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_deleteProject')?.addEventListener('click', event => {
          event.preventDefault();
          deleteProject(event.target, event.target.getAttribute('data-projectResource'));
          return false;
        });

        var submitForm_putimportProject = document.querySelector('#htmForm_putimportProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_putimportProject')?.addEventListener('click', event => {
          event.preventDefault();
          putimportProject(document.querySelector('#htmForm_putimportProject'), document.querySelector('#htmFormButton_putimportProject'));
          return false;
        });

        var submitForm_searchpageProject = document.querySelector('#htmForm_searchpageProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_searchpageProject')?.addEventListener('click', event => {
          event.preventDefault();
          searchpageProject();
          return false;
        });

        var submitForm_deletefilterProject = document.querySelector('#htmForm_deletefilterProject')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_deletefilterProject')?.addEventListener('click', event => {
          event.preventDefault();
          deletefilterProject(event.target);
          return false;
        });
{%- block htmScriptInitProjectPage %}{%- endblock htmScriptInitProjectPage %}
      });
    </script>
{%- endblock htmScriptProjectPage %}
{%- endblock htmScriptPageLayout %}

{%- block websocketPageLayout %}
{%- block websocketProjectPage %}
{% if resultCount > 0 %}
        window.eventBus = new EventBus('/eventbus');
        window.eventBus.enableReconnect(true);
        websocketProject(websocketProjectInner);
{% endif %}
{%- endblock websocketProjectPage %}
{%- endblock websocketPageLayout %}

{%- block htmUrlProjectPage %}{{pageUri}}?q={{query.q}}&amp;rows={% if rows is defined %}{{rows}}{% else %}{{pagination.rows}}{% endif %}&amp;rows={% if start is defined %}{{start}}{% else %}{{pagination.start}}{% endif %}{% for item query.fq %}{% if fq == item %}{% else %}&fq={{fq}}:{{val}}{% endif %}{% endfor %}{% for item in query.sort %}{% if sort == item %}{% else %}&sort={{var}} {{order}}{% endif %}{% endfor %}{%- endblock htmUrlProjectPage %}

{%- block htmBodyStartPageLayout %}
    {{ super() }}
{%- block htmBodyStartProjectPage %}
{% if resultCount > 0 %}
          <div class="wa-flank ">
            <wa-tooltip for="return-to-Project">back to all projects</wa-tooltip>
            <wa-button id="return-to-Project" variant="brand" href="{{ SITE_BASE_URL }}{{ pageUri }}">
              <i slot="start" class="{{ FONTAWESOME_STYLE }} fa-angle-left"></i>
              all projects
            </wa-button>
            <h1 class="Page_objectTitle"><i class="fa-regular fa-school"></i> {{ result.objectTitle | e }}</h1>
          </div>
          <div class="margin-block">
          </div>
{% include en-us/search/project/ProjectSearchForm.htm %}
          <wa-divider></wa-divider>
{% include en-us/search/project/ProjectSearchButtons.htm %}
{% endif %}
{%- endblock htmBodyStartProjectPage %}
{%- endblock htmBodyStartPageLayout %}

{%- block htmBodyMiddlePageLayout %}
{%- block htmBodyMiddleProjectPage %}
        <div class="pageContent ">
{% if resultCount == 0 %}
        <div class="wa-stack ">
          <wa-tooltip for="return-to-Project">back to all projects</wa-tooltip></wa-tooltip>
          <wa-breadcrumb>
            <wa-breadcrumb-item id="return-to-Project" variant="brand" href="{{ SITE_BASE_URL }}{{ pageUri }}">
              <i class="fa-regular fa-school"></i>
              all projects
            </wa-breadcrumb-item>
            <wa-breadcrumb-item>
              no project found
            </wa-breadcrumb-item>
          </wa-breadcrumb>
          <div class="wa-stack wa-align-items-center ">
            <div class="wa-heading-3xl ">
              <i class="fa-regular fa-school"></i>
            </div>
            <span class="wa-heading-m ">no project found</span>
            <p class="wa-caption-l ">A research project using AI and GPUs</p>
{% include en-us/search/project/ProjectSearchForm.htm %}
          </div>
        </div>
{% else %}
{%- include en-us/search/project/ProjectSidebar.htm %}
{%- include en-us/search/project/ProjectSuggestedSearch.htm %}
{% endif %}
{%- block htmFormProjectPage %}
          <form action="/en-us/api/project" id="ProjectForm" class="pageForm " onsubmit="event.preventDefault(); return false; ">
{% if result.projectResource is defined %}
            <input name="projectResource" class="valueProjectResource" type="hidden" value="{{ result.projectResource }}"/>
            {% endif %}
            <input name="focusId" type="hidden"/>
            <input name="pageResponse" id="pageResponse" class="pageResponse"  value='{{ toJsonObjectStringInApostrophes(pageResponse) }}' type="hidden"/>
            <input name="result" id="result" class="result"  value='{{ toJsonObjectStringInApostrophes(result) }}' type="hidden"/>
            <input name="listProject" id="listProject" class="listProject"  value='{{ toJsonArrayStringInApostrophes(listProject) }}' type="hidden"/>
          </form>
  {% if solrId is defined %}
          {{ htmButton_searchpageProject() }}
          {{ htmForm_searchpageProject() }}
  {% endif %}
{%- endblock htmFormProjectPage %}
        </div>
{%- endblock htmBodyMiddleProjectPage %}
{%- endblock htmBodyMiddlePageLayout %}

{%- block htmBodyEndPageLayout %}
{%- block htmBodyEndProjectPage %}
{%- include en-us/search/project/ProjectLocation.htm %}
{%- endblock htmBodyEndProjectPage %}
      {{ super() }}
{%- endblock htmBodyEndPageLayout %}