{% if map_preloader %}
<!-- 1 -->
{% if show_map %}
  <!-- 2 -->
  <div id="paragraph-map" class="container-fluid paragraph-map-container">
    {% if paragraph.field_map_title is not empty or paragraph.field_map_text is not empty %}
      <div class="row title-row">
        <div class="col-12 text-align-center">
          <h2>{{ paragraph.field_map_title.0.value }}</h2>
          {% if paragraph.field_map_subtitle is not empty %}
            <h3>{{ paragraph.field_map_subtitle.0.value }}</h3>
          {% endif %}
          {% if paragraph.field_map_text is not empty %}
            <div class="description">{{ content.field_map_text }}</div>
          {% endif %}
        </div>
      </div>
    {% endif %}
    <div class="row map-row">
      {% if render_list %}
        <div class="col-12 col-lg-4 order-2 order-lg-1 list-column d-none d-lg-block">
          <div class="input-group  my-3 search-location-form-wrapper d-none d-lg-block">
            <form class="place-search-form d-flex w-100">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="{{ 'Search locations'|t }}"
                       aria-label="{{ 'Search locations'|t }}"
                       aria-describedby="search_locations">
                <span class="input-group-text clear-search">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
                     viewBox="0 0 16 16">
                    <path
                      d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                </svg>
              </span>
              </div>
              <button class="btn btn-outline-secondary search_locations" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-search"
                     viewBox="0 0 16 16">
                  <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
              </button>
            </form>
          </div>
          <div class="location-filters-wrapper d-none d-lg-block"></div>

          {% set has_filters = use_filters ? 'has-filters' : '' %}
          <div class="place-list-wrapper overflow-auto {{ has_filters }}">
          </div>
          <button class="btn btn-outline-secondary d-block d-lg-none switch-button" type="button" id="switch-button"
                  value="Switch"
                  data-target="list"><span
              class="label">{{ 'Map'|t }}</span></button>

          {% if show_list_counter %}
            <div class="total-count-placeholder"></div>
          {% endif %}
        </div>
        <div class="col-12 col-lg-8 p-0 order-1 order-lg-2 map-column">
          <div class="input-group  my-3 search-location-form-wrapper d-block d-lg-none">
            <form class="place-search-form d-flex w-100">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="{{ 'Search locations'|t }}"
                       aria-label="{{ 'Search locations'|t }}"
                       aria-describedby="search_locations">
                <span class="input-group-text clear-search">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
                     viewBox="0 0 16 16">
                    <path
                      d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                </svg>
              </span>
              </div>
              <button class="btn btn-outline-secondary search_locations" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-search"
                     viewBox="0 0 16 16">
                  <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
              </button>
            </form>
          </div>
          <div class="location-filters-wrapper d-block d-lg-none"></div>
          <div class="map-container">
            <div class="map" id="map"></div>
            <button class="btn btn-outline-secondary d-block d-lg-none switch-button" type="button" id="switch-button"
                    value="Switch"
                    data-target="map"><span
                class="label">{{ 'List'|t }}</span></button>
          </div>
        </div>

      {% else %}
        <!-- 3 -->
        <div class="col-12 list-column">
          <div class="container">
            <div class="row">
              <div class="col-6 offset-3 justify-content-center"></div>
              <div class="input-group mb-3 search-location-form-wrapper">
                <form class="place-search-form d-flex mx-auto justify-content-center">
                  <input type="text" class="form-control" placeholder="Search locations" aria-label="Search locations"
                         aria-describedby="button-addon2">
                  <button class="btn btn-outline-secondary" type="button" id="search_locations">Search</button>
                </form>
              </div>
              <div class="location-filters-wrapper"></div>
            </div>
          </div>
        </div>
        <div class="col-12  p-0 map-column">
          <div class="map-container">
            <div class="map" id="map"></div>
          </div>
        </div>
      {% endif %}
      <div class="share-container">
        <!-- Modal -->
        <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              <div class="modal-body">
                <h2>{{ 'Share location!'|t }}</h2>
                <p>{{ 'Share your favorite place with your friend'|t }}</p>
                <p>{{ 'Copy the link and get sharing!'|t }}</p>
                <div class="input-group mb-3">
                  <span class="input-group-text"><span class="icon"></span></span>
                  <input id="share-link" type="text" class="form-control" placeholder="Share Offer"
                         aria-label="Share Offer" aria-describedby="button-addon2" value="{{ path }}">
                  <button class="btn btn-outline-secondary" type="button" id="button-addon2" value="Copy"><span
                      class="label">{{ 'Copy'|t }}</span><span class="icon"></span></button>
                </div>
                <button class="btn btn-outline-primary" type="button" id="share-button" value="Share"><span
                    class="label">{{ 'Share'|t }}</span><span class="icon"></span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% else %}
  <!-- 4 -->
  <div id="paragraph-map" class="container paragraph-map-container">
    {% if paragraph.field_map_title is not empty or paragraph.field_map_text is not empty %}
      <div class="row title-row">
        <div class="col-12 text-align-center">
          <h2>{{ paragraph.field_map_title.0.value }}</h2>
          {% if paragraph.field_map_subtitle is not empty %}
            <h3>{{ paragraph.field_map_subtitle.0.value }}</h3>
          {% endif %}
          {% if paragraph.field_map_text is not empty %}
            <div class="description">{{ content.field_map_text }}</div>
          {% endif %}
        </div>
      </div>
    {% endif %}
    <div class="row map-row-wrapper-placeholder">
      <div class="col-12 text-align-center align-content-center px-0">
        <a href="{{ show_map_link }}" class="btn btn-primary use-ajax">{{ 'Show Map'|t }}</a>
      </div>
    </div>
  </div>
{% endif %}
{% else %}
<!-- 5 -->
<div id="paragraph-map" class="container-fluid paragraph-map-container">
  {% if paragraph.field_map_title is not empty or paragraph.field_map_text is not empty %}
    <div class="row title-row">
      <div class="col-12 text-align-center">
        <h2>{{ paragraph.field_map_title.0.value }}</h2>
        {% if paragraph.field_map_subtitle is not empty %}
          <h3>{{ paragraph.field_map_subtitle.0.value }}</h3>
        {% endif %}
        {% if paragraph.field_map_text is not empty %}
          <div class="description">{{ content.field_map_text }}</div>
        {% endif %}
      </div>
    </div>
  {% endif %}
  <div class="row map-row">

    {% if render_list %}
    {% if  use_mobile_view %}
    <div class="col-12  order-2 list-column d-none">
      <div class="input-group  my-3 search-location-form-wrapper d-none">
        {% else %}
        <div class="col-12 col-lg-4 order-2 order-lg-1 list-column d-none d-lg-block">
          <div class="input-group  my-3 search-location-form-wrapper d-none d-lg-block">
            {% endif %}
            <form class="place-search-form d-flex w-100">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="{{ 'Search locations'|t }}"
                       aria-label="{{ 'Search locations'|t }}"
                       aria-describedby="search_locations">
                <span class="input-group-text clear-search">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
                     viewBox="0 0 16 16">
                    <path
                      d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                </svg>
              </span>
              </div>
              <button class="btn btn-outline-secondary search_locations" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
                     viewBox="0 0 16 16">
                  <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
              </button>
            </form>
          </div>
          {% if  use_mobile_view %}
            <div class="location-filters-wrapper d-none"></div>
              {% else %}
                <div class="location-filters-wrapper d-none d-lg-block"></div>
                  {% endif %}


          {% set has_filters = use_filters ? 'has-filters' : '' %}
          <div class="place-list-wrapper overflow-auto {{ has_filters }}">
          </div>
    {% if  use_mobile_view %}
      <button class="btn btn-outline-secondary d-block switch-button" type="button" id="switch-button"
              value="Switch"
              data-target="list"><span
          class="label">{{ 'Map'|t }}</span></button>
      {% else %}
        <button class="btn btn-outline-secondary d-block d-lg-none switch-button" type="button" id="switch-button"
                value="Switch"
                data-target="list"><span
            class="label">{{ 'Map'|t }}</span></button>
      {% endif %}


          {% if show_list_counter %}
            <div class="total-count-placeholder"></div>
          {% endif %}
        </div>
        {% if  use_mobile_view %}

        <div class="col-12 p-0 order-1 map-column">
          <div class="input-group  my-3 search-location-form-wrapper d-block">
            {% else %}
            <div class="col-12 col-lg-8 p-0 order-1 order-lg-2 map-column">
              <div class="input-group  my-3 search-location-form-wrapper d-block d-lg-none">
            {% endif %}
            <form class="place-search-form d-flex w-100">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="{{ 'Search locations'|t }}"
                       aria-label="{{ 'Search locations'|t }}"
                       aria-describedby="search_locations">
                <span class="input-group-text clear-search">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg"
                     viewBox="0 0 16 16">
                    <path
                      d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                </svg>
              </span>
              </div>
              <button class="btn btn-outline-secondary search_locations" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
                     viewBox="0 0 16 16">
                  <path
                    d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
              </button>
            </form>
          </div>
              {% if use_mobile_view %}
              <div class="location-filters-wrapper d-block"></div>
              {% else %}
                <div class="location-filters-wrapper d-block d-lg-none"></div>
              {% endif %}

          <div class="map-container">
            <div class="map" id="map"></div>
            {% if use_mobile_view %}
            <button class="btn btn-outline-secondary d-block switch-button" type="button" id="switch-button"
                    value="Switch"
                    data-target="map"><span
                class="label">{{ 'List'|t }}</span></button>
            {% else %}
              <button class="btn btn-outline-secondary d-block d-lg-none switch-button" type="button" id="switch-button"
                      value="Switch"
                      data-target="map"><span
                  class="label">{{ 'List'|t }}</span></button>
            {% endif %}
          </div>
        </div>

        {% else %}
          <!-- 6 -->
          <div class="col-12 list-column">
            <div class="container">
              <div class="row">
                <div class="col-6 offset-3 justify-content-center"></div>
                <div class="input-group mb-3 search-location-form-wrapper">
                  <form class="place-search-form d-flex mx-auto justify-content-center">
                    <input type="text" class="form-control" placeholder="Search locations" aria-label="Search locations"
                           aria-describedby="button-addon2">
                    <button class="btn btn-outline-secondary" type="button" id="search_locations">Search</button>
                  </form>
                </div>
                <div class="location-filters-wrapper"></div>
              </div>
            </div>
          </div>
          <div class="col-12  p-0 map-column">
            <div class="map-container">
              <div class="map" id="map"></div>
            </div>
          </div>
        {% endif %}
        <div class="share-container">
          <!-- Modal -->
          <div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                  <h2>{{ 'Share location!'|t }}</h2>
                  <p>{{ 'Share your favorite place with your friend'|t }}</p>
                  <p>{{ 'Copy the link and get sharing!'|t }}</p>
                  <div class="input-group mb-3">
                    <span class="input-group-text"><span class="icon"></span></span>
                    <input id="share-link" type="text" class="form-control" placeholder="Share Offer"
                           aria-label="Share Offer" aria-describedby="button-addon2" value="{{ path }}">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2" value="Copy"><span
                        class="label">{{ 'Copy'|t }}</span><span class="icon"></span></button>
                  </div>
                  <button class="btn btn-outline-primary" type="button" id="share-button" value="Share"><span
                      class="label">{{ 'Share'|t }}</span><span class="icon"></span></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
