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

{%- block htmStylesPageLayout %}
{{ super() }}
    <link rel="stylesheet" href="{{ staticBaseUrl }}/css/en-us/search/fish-farm/FishFarm.css"/>
{%- block htmStylesFishFarmPage %}
{%- endblock htmStylesFishFarmPage %}
{%- endblock htmStylesPageLayout %}

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

{%- block htmScriptsPageLayout %}
{{ super() }}
{%- block htmScriptsFishFarmPage %}
    <script src="{{staticBaseUrl}}/js/en-us/search/fish-farm/FishFarm.js"></script>
    <script type="module" src="{{staticBaseUrl}}/js/en-us/search/fish-farm/FishFarmSearchPage.js"></script>
    <script type="module" src="{{staticBaseUrl}}/js/en-us/search/fish-farm/FishFarmEditPage.js"></script>
{%- endblock htmScriptsFishFarmPage %}
{%- endblock htmScriptsPageLayout %}

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

      function jsWebsocketFishFarm(entityShortId, vars, $response) {
{%- block jsWebsocketFishFarmPage %}{%- endblock %}
      }

      function jsTooltipFishFarm(e, feature) {
{%- block jsTooltipFishFarmPage %}{%- endblock %}
      }

      function htmTooltipFishFarm(feature, layer) {
        return `{%- block htmTooltipFishFarmPage %}
<h3><i class="{{ classIconCssClasses }}  "></i><a href="${quoteattr(feature.properties.editPage)}">${feature.properties.objectTitle}</a></h3>
{%- endblock htmTooltipFishFarmPage %}`;
      }

      function jsLegendFishFarm(map) {
{%- block jsLegendFishFarmPage %}
        var div = L.DomUtil.create('div', 'info legend');
        var htm = '';
        window.listFishFarm.forEach((result, index) => {
          if(result.location) {
            var shapes = [];
            if(Array.isArray(result.location))
              shapes = shapes.concat(result.location);
            else
              shapes.push(result.location);
            shapes.forEach(function(shape, index) {
              htm += htmLegendFishFarm(map, shape, result, index, shapes.length);
            });
          }
          if(result.areaServed) {
            var shapes = [];
            if(Array.isArray(result.areaServed))
              shapes = shapes.concat(result.areaServed);
            else
              shapes.push(result.areaServed);
            shapes.forEach(function(shape, index) {
              htm += htmLegendFishFarm(map, shape, result, index, shapes.length);
            });
          }
        });
        div.innerHTML = htm;
        return div;
{%- endblock jsLegendFishFarmPage %}
      }

      function htmLegendFishFarm(map, shape, result, index, count) {
        var color = result.areaServedColors[index];
        var title = result.areaServedTitles[index];
        var url = result.editPage[index];
        var htm = '';
        htm += `<div class="cursor-pointer " style="max-width: 400px; ">
`;
        htm += `{%- block htmLegendFishFarmPage %}
    <div title="${quoteattr(title)}">
    <div style="width: 20px; ">
      <i class="{{ FONTAWESOME_STYLE }} fa-circle" style="color: ${color}; "></i>
    </div>
    <div class="text-overflow-ellipsis ">
      <span class="" data-solrId="${result.solrId}" onclick="window.mapLayers[this.getAttribute('data-solrId')].openPopup(); return false;" href="">${title}</span>
    </div>
    </div>
{%- endblock htmLegendFishFarmPage %}`;
        htm += `
</div>
`;
        return htm;
      }

      function jsStyleFishFarm(feature) {
{%- block jsStyleFishFarmPage %}
        if(feature.geometry.type == 'Point') {
          return {
            radius: 8
            , fillColor: (feature.properties.areaServedColors && feature.properties.areaServedColors[feature.index] ? feature.properties.areaServedColors[feature.index] : (feature.properties.color ? feature.properties.color : '#000'))
            , color: (feature.properties.areaServedColors && feature.properties.areaServedColors[feature.index] ? feature.properties.areaServedColors[feature.index] : (feature.properties.color ? feature.properties.color : '#000'))
            , weight: 1
            , opacity: 0.7
            , fillOpacity: 0.7
            , contextmenu: true
            , contextmenuItems: [
              {
                text: 'Show coordinates'
                , callback: function(event) {
                  alert(event2.target.getLatLngs());
                }
              }
            ]
          };
        } else if(feature.geometry.type == 'LineString') {
          return {
            color: (feature.properties.areaServedColors && feature.properties.areaServedColors[feature.index] ? feature.properties.areaServedColors[feature.index] : (feature.properties.color ? feature.properties.color : '#000'))
            , weight: 5
            , opacity: 0.7
          };
        } else {
          return {
             fillColor: (feature.properties.areaServedColors && feature.properties.areaServedColors[feature.index] ? feature.properties.areaServedColors[feature.index] : (feature.properties.color ? feature.properties.color : '#000'))
            , color: (feature.properties.areaServedColors && feature.properties.areaServedColors[feature.index] ? feature.properties.areaServedColors[feature.index] : (feature.properties.color ? feature.properties.color : '#000'))
            , weight: 3
            , opacity: 0.7
            , fillOpacity: 0.7
          };
        }
{%- endblock jsStyleFishFarmPage %}
      }

      function facetChangeFishFarmSuccess(e) {
        var l = e.querySelector('.pageForm .listFishFarm')?.value;
        if(l)
          window.listFishFarm = JSON.parse(l);
{% block facetChangeFishFarmSuccess %}{%- endblock facetFishFarmSuccess %}
      }
      function facetChangeFishFarmError(e) {
{% block facetChangeFishFarmError %}{%- endblock facetFishFarmError %}
      }

      function facetSimpleRangeFishFarmSuccess(e) {
{% block facetSimpleRangeFishFarmSuccess %}      facetChangeFishFarmSuccess(e);{% endblock facetSimpleRangeFishFarmSuccess %}
      }
      function facetSimpleRangeFishFarmError(e) {
{% block facetSimpleRangeFishFarmError %}      facetChangeFishFarmError(e);{% endblock facetSimpleRangeFishFarmError %}
      }
      function facetSimpleRangeFishFarm(e) {
        facetSimpleRange(e, facetSimpleRangeFishFarmSuccess, facetSimpleRangeFishFarmError);
      }

      function facetRangeTimeZoneFishFarmSuccess(e) {
{% block facetRangeTimeZoneFishFarmSuccess %}      facetChangeFishFarmSuccess(e);{% endblock facetRangeTimeZoneFishFarmSuccess %}
      }
      function facetRangeTimeZoneFishFarmError(e) {
{% block facetRangeTimeZoneFishFarmError %}      facetChangeFishFarmError(e);{%- endblock facetRangeTimeZoneFishFarmError %}
      }
      function facetRangeTimeZoneFishFarm(e) {
        facetRangeTimeZone(e, facetRangeTimeZoneFishFarmSuccess, facetRangeTimeZoneFishFarmError);
      }

      function facetRangeGapChangeFishFarmSuccess(e) {
{% block facetRangeGapChangeFishFarmSuccess %}      facetChangeFishFarmSuccess(e);{% endblock facetRangeGapChangeFishFarmSuccess %}
      }
      function facetRangeGapChangeFishFarmError(e) {
{% block facetRangeGapChangeFishFarmError %}      facetChangeFishFarmError(e);{%- endblock facetRangeGapChangeFishFarmError %}
      }
      function facetRangeGapChangeFishFarm(classSimpleName, event) {
        facetRangeGapChange(classSimpleName, event, facetRangeGapChangeFishFarmSuccess, facetRangeGapChangeFishFarmError);
      }

      function facetRangeStartChangeFishFarmSuccess(e) {
{% block facetRangeStartChangeFishFarmSuccess %}      facetChangeFishFarmSuccess(e);{% endblock facetRangeStartChangeFishFarmSuccess %}
      }
      function facetRangeStartChangeFishFarmError(e) {
{% block facetRangeStartChangeFishFarmError %}      facetChangeFishFarmError(e);{%- endblock facetRangeStartChangeFishFarmError %}
      }
      function facetRangeStartChangeFishFarm(classSimpleName, event) {
        facetRangeStartChange(classSimpleName, event, facetRangeStartChangeFishFarmSuccess, facetRangeStartChangeFishFarmError);
      }

      function facetRangeEndChangeFishFarmSuccess(e) {
{% block facetRangeEndChangeFishFarmSuccess %}      facetChangeFishFarmSuccess(e);{% endblock facetRangeEndChangeFishFarmSuccess %}
      }
      function facetRangeEndChangeFishFarmError(e) {
{% block facetRangeEndChangeFishFarmError %}      facetChangeFishFarmError(e);{%- endblock facetRangeEndChangeFishFarmError %}
      }
      function facetRangeEndChangeFishFarm(classSimpleName, event) {
        facetRangeEndChange(classSimpleName, event, facetRangeEndChangeFishFarmSuccess, facetRangeEndChangeFishFarmError);
      }
    </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')
        , customElements.whenDefined('wa-select')
        , customElements.whenDefined('wa-radio')
        , customElements.whenDefined('wa-checkbox')
        , customElements.whenDefined('wa-dropdown')
      ]).then(() => {

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

        if(entityShortId == 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.entityShortId is defined %}
        {% endif %}
        }
        var l = document.querySelector('.pageForm .listFishFarm')?.value;
        if(l)
          window.listFishFarm = JSON.parse(l);
        window.varsFq = JSON.parse('{{ toJsonObjectStringInApostrophes(varsFq) }}');
        window.varsRange = JSON.parse('{{ toJsonObjectStringInApostrophes(varsRange) }}');
        window.defaultRangeVar = '{{ defaultRangeVar }}';
        document.querySelector('#siteSidebarToggleRange')?.addEventListener('wa-after-hide', function(e) { document.querySelector('#pageFacetRangeTimeZonePopup').active = false; });
        document.querySelector('#pageFacetRangeTimeZoneInput')?.addEventListener('input', facetRangeTimeZoneFishFarm);
        document.querySelector('#pageFacetRangeTimeZoneInput')?.addEventListener('input', facetRangeTimeZoneFishFarm);
        document.querySelector('#pageFacetRangeTimeZoneInput')?.addEventListener('focus', facetRangeTimeZoneFishFarm);
        document.querySelector('#pageFacetSimpleRangeDropdown')?.addEventListener('wa-select', facetSimpleRangeFishFarm);
        pageGraphFishFarm();
        {% for key, value in varsQ.items() %}

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

        document.querySelector('#qFishFarm_rows')?.addEventListener('change', event => {
          paramChange('FishFarm', event.target, document.querySelector('#qFishFarmDiv_rows'));
        });

        document.querySelector('#qFishFarm_start')?.addEventListener('change', event => {
          paramChange('FishFarm', event.target, document.querySelector('#qFishFarmDiv_start'));
        });


        var submitForm_searchpagefrfrFishFarm = document.querySelector('#htmForm_searchpagefrfrFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_searchpagefrfrFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          searchpagefrfrFishFarm();
          return false;
        });

        var submitForm_patchFishFarm = document.querySelector('#htmForm_patchFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_patchFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          patchFishFarm(null, document.querySelector('#htmForm_patchFishFarm'), document.querySelector('#htmFormButton_patchFishFarm'), event.target.getAttribute('data-entityShortId'));
          return false;
        });

        var submitForm_postFishFarm = document.querySelector('#htmForm_postFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_postFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          postFishFarm(document.querySelector('#htmForm_postFishFarm')
          , document.querySelector('#htmFormButton_postFishFarm')
          , (json, target) => {
            window.location.href = json.editPage;
          });
          return false;
        });

        var submitForm_deleteFishFarm = document.querySelector('#htmForm_deleteFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_deleteFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          deleteFishFarm(event.target, event.target.getAttribute('data-entityShortId'));
          return false;
        });

        var submitForm_putimportFishFarm = document.querySelector('#htmForm_putimportFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_putimportFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          putimportFishFarm(document.querySelector('#htmForm_putimportFishFarm'), document.querySelector('#htmFormButton_putimportFishFarm'));
          return false;
        });

        var submitForm_searchpageFishFarm = document.querySelector('#htmForm_searchpageFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_searchpageFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          searchpageFishFarm();
          return false;
        });

        var submitForm_deletefilterFishFarm = document.querySelector('#htmForm_deletefilterFishFarm')?.addEventListener('submit', event => {
          event.preventDefault();
          return false;
        });
        document.querySelector('#htmFormButton_deletefilterFishFarm')?.addEventListener('click', event => {
          event.preventDefault();
          deletefilterFishFarm(event.target);
          return false;
        });
{%- block htmScriptInitFishFarmPage %}{%- endblock htmScriptInitFishFarmPage %}
      });
    </script>
{%- endblock htmScriptFishFarmPage %}
{%- endblock htmScriptPageLayout %}

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

{%- block htmUrlFishFarmPage %}{{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 htmUrlFishFarmPage %}

{%- if pageSearchButtons is not defined %}
{%- set pageSearchButtons %}
{% include en-us/search/fish-farm/FishFarmSearchButtons.htm %}
{%- endset pageSearchButtons %}
{%- endif %}
{%- if pageSearchFormButtons is not defined %}
{%- set pageSearchFormButtons %}
{% include en-us/search/fish-farm/FishFarmSearchFormButtons.htm %}
{%- endset pageSearchFormButtons %}
{%- endif %}
{%- if pageBreadcrumb is not defined %}
{%- set pageBreadcrumb %}
              <wa-tooltip for="return-to-FishFarm">back to all fish farms</wa-tooltip>
              <wa-breadcrumb>
                <wa-breadcrumb-item id="return-to-FishFarm" variant="brand" href="{{ SITE_BASE_URL }}{{ pageUri }}">
                  <i class="fa-duotone fa-regular fa-squid"></i>
                  all fish farms
                </wa-breadcrumb-item>
                <wa-breadcrumb-item>
                  a fish farm
                </wa-breadcrumb-item>
              </wa-breadcrumb>
{%- endset pageBreadcrumb %}
{%- endif  %}

{%- block htmBodyStartPageLayout %}
    {{ super() }}
{%- block htmBodyStartFishFarmPage %}
{% if resultCount > 0 %}
          <div class="wa-flank ">
            <h1 class="Page_objectTitle"><i class="fa-duotone fa-regular fa-squid"></i> {{ result.objectTitle | e }}</h1>
          </div>
{% endif %}
{% include en-us/search/fish-farm/FishFarmSearchForm.htm %}
{%- endblock htmBodyStartFishFarmPage %}
{%- endblock htmBodyStartPageLayout %}

{%- block htmBodyMiddlePageLayout %}
{%- block htmBodyMiddleFishFarmPage %}
{%- include en-us/search/fish-farm/FishFarmSidebar.htm %}
        <div class="pageContent ">
{% if resultCount == 0 %}
        <div class="wa-stack ">
          <wa-tooltip for="return-to-FishFarm">back to all fish farms</wa-tooltip></wa-tooltip>
          <wa-breadcrumb>
            <wa-breadcrumb-item id="return-to-FishFarm" variant="brand" href="{{ SITE_BASE_URL }}{{ pageUri }}">
              <i class="fa-duotone fa-regular fa-squid"></i>
              all fish farms
            </wa-breadcrumb-item>
            <wa-breadcrumb-item>
              no fish farm found
            </wa-breadcrumb-item>
          </wa-breadcrumb>
          <div class="wa-stack wa-align-items-center ">
            <div class="wa-heading-3xl ">
              <i class="fa-duotone fa-regular fa-squid"></i>
            </div>
            <span class="wa-heading-m ">no fish farm found</span>
            <p class="wa-caption-l ">A fish farm</p>
          </div>
        </div>
{% else %}
{%- include en-us/search/fish-farm/FishFarmSuggestedSearch.htm %}
{% endif %}
{%- block htmFormFishFarmPage %}
          <form action="/en-us/api/fish-farm" id="FishFarmForm" class="pageForm " onsubmit="event.preventDefault(); return false; ">
{% if result.entityShortId is defined %}
            <input name="entityShortId" class="valueEntityShortId" type="hidden" value="{{ result.entityShortId }}"/>
            {% 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="listFishFarm" id="listFishFarm" class="listFishFarm"  value='{{ toJsonArrayStringInApostrophes(listFishFarm) }}' type="hidden"/>
          </form>
{%- if resultCount >= 1 %}
          {{ htmForm_searchpageFishFarm() }}
{% endif -%}
{%- endblock htmFormFishFarmPage %}
        </div>
{%- endblock htmBodyMiddleFishFarmPage %}
{%- endblock htmBodyMiddlePageLayout %}

{%- block htmBodyEndPageLayout %}
{%- block htmBodyEndFishFarmPage %}
{%- include en-us/search/fish-farm/FishFarmLocation.htm %}
{%- endblock htmBodyEndFishFarmPage %}
      {{ super() }}
{%- endblock htmBodyEndPageLayout %}