{% extends 'layouts/vertical.html' %}

{% load static i18n %}

{% block title %}Google Maps{% endblock title %}

{% block page_content %}

<div class="container-fluid">
  {% include 'partials/page-title.html' with title='Google' subtitle='Maps' %}
</div> <!-- container -->

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <div class="flex-grow-1">
            <h4 class="card-title">Examples</h4>
          </div>
        </div>

        <div class="card-body">
          <div class="row g-3">
            <div class="col-lg-4">
              <h5 class="mb-1">Basic Google Map</h5>
              <p class="text-muted mb-0">Displays a basic embedded Google Map.</p>
            </div>
            <div class="col-lg-8">
              <iframe
                src="https://www.google.com/maps/embed/v1/place?q=Eiffel+Tower&key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4"
                style="width: 100%; height: 360px; overflow:hidden; border:0;"></iframe>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-3">
            <div class="col-lg-4">
              <h5 class="mb-1">Street View Google Map</h5>
              <p class="text-muted mb-0">Displays a satellite-styled view of the map.</p>
            </div>
            <div class="col-lg-8">
              <iframe
                src="https://www.google.com/maps/embed/v1/place?q=Statue+of+Liberty&key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4&zoom=18&maptype=satellite"
                style="width: 100%; height: 360px; overflow:hidden; border:0;"></iframe>
            </div>
          </div>

          <div class="my-4 border-top border-dashed"></div>

          <div class="row g-3">
            <div class="col-lg-4">
              <h5 class="mb-1">Dark Google Map</h5>
              <p class="text-muted mb-0">A dark-mode styled map using CSS filters.</p>
            </div>
            <div class="col-lg-8">
              <iframe
                src="https://www.google.com/maps/embed/v1/place?q=Sydney+Opera+House&key=AIzaSyBSFRN6WWGYwmFi498qXXsD2UwkbmD74v4"
                style="width: 100%; height: 360px; overflow:hidden; border:0;filter: invert(100%) hue-rotate(180deg);"></iframe>
            </div>
          </div>
        </div>
      </div> <!-- end card-->
    </div> <!-- end col-->
  </div> <!-- end row-->
</div>

{% endblock page_content %}