{%- assign display_map = false -%}
{%- assign onboarding = false -%}
{%- assign bg_image = section.settings.background_image -%}

{%- if section.settings.api_key == blank and bg_image == blank -%}
  {%- assign onboarding = true -%}
{%- endif -%}
{%- if section.settings.api_key != blank and section.settings.map_address -%}
  {%- assign display_map = true -%}
{%- endif -%}

<style>
  {% if bg_image.src != blank %}
  #MapSection--{{ section.id }} .map-section__image {
    background-position: {{ section.settings.background_image_position }};
  }

  @media only screen and (max-width: 750px) {
    #MapSection--{{ section.id }} .map-section__image {
      padding-top: {{ 1 | divided_by: bg_image.aspect_ratio | times: 100 }}%;
    }
  }
  {% endif %}
</style>


<div id="MapSection--{{ section.id }}"
     class="map-section {% if template == 'page.contact' %}contact_map {% endif %}
           {% if display_map %}map-section--display-map{% endif %}
           {% if onboarding == true %}map-section--onboarding{% endif %}"
     data-section-id="{{ section.id }}"
     data-section-type="map">
  <div class="page-width map-section__wrapper">
    <div class="map-section__content-wrapper">
      <div class="map-section__content">
        
        <style>
          .map-section__content .desktop_logo img{
            width:{{section.settings.desktop_logo_size}};
          }
        </style>
              <ul class="map_logo-1">
                {% if template.name == 'index' %}
                <h1 class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
                  {% else %}
                  <div class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
                    {% endif %}
                    {% if section.settings.imagelogo %}
                    {%- assign img_url = section.settings.imagelogo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                    <a href="/" itemprop="url" class="desktop_logo site-header__logo-image">
                      {% capture logo_alt %}{{ section.settings.imagelogo.alt | default: shop.name }}{% endcapture %}
                      <img class="lazyload js"
                           src="{{ section.settings.imagelogo | img_url: '300x300' }}"
                           data-src="{{ img_url }}"
                           data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                           data-aspectratio="{{ section.settings.imagelogo.aspect_ratio }}"
                           data-sizes="auto"
                           alt="{{ logo_alt | escape }}"
                           >
                      <noscript>
                        {% capture image_size %}300x{% endcapture %}
                        <img src="{{ section.settings.imagelogo | img_url: image_size }}"
                             srcset="{{ section.settings.imagelogo | img_url: image_size }} 1x, {{ section.settings.imagelogo | img_url: image_size, scale: 2 }} 2x"
                             alt="{{ section.settings.imagelogo.alt | default: shop.name }}"
                             itemprop="logo"
                             >
                      </noscript>
                    </a>
                    {% else %}
                    <a class="site-header__logo-link" href="/" itemprop="url">{{ shop.name }}</a>
                    {% endif %}
                    {% if template.name == 'index' %}
                    </h1>
                  {% else %}
                  </div>
                {% endif %}


              </ul>
            
        
        {% if section.settings.address != blank %}
          <div class="rte-setting">{{ section.settings.address }}</div>
          {% if section.settings.map_address != blank and section.settings.button_text != blank %}
            <p>
              <a href="https://maps.google.com?daddr={{ section.settings.map_address | escape }}"
                 class="btn btn--secondary btn--small map_section__directions-btn"
                 target="_blank"
              >
                {% if section.settings.show_pin %}{% include 'icon-pin' %}{% endif %}
                <span>{{ section.settings.button_text | escape }}</span>
              </a>
            </p>
          {% endif %}
        {% endif %}
      </div>
    </div>
    <div class="map-section__background-wrapper">
      {% if bg_image != blank %}
        <div class="map-section__image lazyload js"
             data-bgset="{% include 'bgset', image: bg_image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ bg_image | img_url: '300x300' }});">
        </div>
        <noscript>
          <div class="map-section__image" style="background-image: url({{ bg_image | img_url: 'x800', crop: 'top' }});"></div>
        </noscript>
      {% elsif onboarding == true %}
        <div class="placeholder-background">
          {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
      {% if display_map %}
        <div class="map-section__container"
             id="Map-{{ section.id }}"
             data-map
             data-address-setting="{{ section.settings.map_address | escape }}"
             data-api-key="{{ section.settings.api_key }}">
        </div>
        <div class="map-section__overlay" data-map-overlay></div>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Map",
    "class": "index-section",
    "settings": [
      {
        "type": "header",
        "content": "Map [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002081174-How-to-setup-Map-section-in-Booster-2-0)"
      },
      {
        "type": "image_picker",
        "id": "imagelogo",
        "label": "Image"
      },
        {
          "type": "select",
          "id": "desktop_logo_size",
          "label": "Logo size in %",
          "options": [
            {
              "value": "30%",
              "label": "30"
            },
            {
              "value": "35%",
              "label": "35"
            },
            {
              "value": "50%",
              "label": "50"
            },
            {
              "value": "60%",
              "label": "60"
            },
            {
              "value": "70%",
              "label": "70"
            },
            {
              "value": "75%",
              "label": "75"
            },
            {
              "value": "90%",
              "label": "90"
            },
            {
              "value": "100%",
              "label": "100"
            }
          ]
        },
      {
        "id": "address",
        "type": "richtext",
        "label": "Address and hours",
        "default": "<p>123 Fake St.<br>Toronto, Canada</p><p>Mon - Fri, 10am - 9pm<br>Saturday, 11am - 9pm<br>Sunday, 11am - 5pm</p>"
      },
      {
        "id": "map_address",
        "type": "text",
        "label": "Map address",
        "info": "Google Maps will find the exact location",
        "default": "80 Spadina Ave, Toronto"
      },
      {
        "id": "button_text",
        "type": "text",
        "label": "Map link label",
        "default": "Get directions"
      },
      {
        "id": "show_pin",
        "type": "checkbox",
        "label": "Show pin",
        "default": true
      },
      {
        "type": "header",
        "content": "Background"
      },
      {
        "id": "api_key",
        "type": "text",
        "label": "Google Maps API key",
        "info": "You’ll need to [register a Google Maps API Key](https://help.shopify.com/manual/using-themes/troubleshooting/map-section-api-key) to display the map"
      },
      {
        "type": "image_picker",
        "id": "background_image",
        "label": "Image",
        "info": "Displayed if the map isn’t loaded"
      },
      {
        "type": "select",
        "id": "background_image_position",
        "label": "Image position",
        "default": "center center",
        "options": [
          {
            "label": "Top left",
            "value": "top left"
          },
          {
            "label": "Top center",
            "value": "top center"
          },
          {
            "label": "Top right",
            "value": "top right"
          },
          {
            "label": "Middle left",
            "value": "center left"
          },
          {
            "label": "Middle center",
            "value": "center center"
          },
          {
            "label": "Middle right",
            "value": "center right"
          },
          {
            "label": "Bottom left",
            "value": "bottom left"
          },
          {
            "label": "Bottom center",
            "value": "bottom center"
          },
          {
            "label": "Bottom right",
            "value": "bottom right"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Map",
        "category": "Store information"
      }
    ]
  }
{% endschema %}
