{% extends "resources/base.html" %}

{% block content %}

    <!-- Page Content -->
    <div class="page-heading contact-heading header-text ">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="text-content">
              <h4>Sie brauchen etwas wirklich spezielles?</h4>
              <h2>Kontaktieren Sie uns gerne</h2>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="find-us margintop">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="section-heading">
              <h2>Sie finden uns hier</h2>
            </div>
          </div>
          <div class="col-md-8">
<!-- How to change your own map point
	1. Go to Google Maps
	2. Click on your location point
	3. Click "Share" and choose "Embed map" tab
	4. Copy only URL and paste it within the src="" field below
-->
            <div id="map">
              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2738.0173652963335!2d14.633846615844234!3d46.66591827913351!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47701b2b0f29eb71%3A0x9513b395598a971e!2sSchlachthofstra%C3%9Fe%201%2C%209100%20V%C3%B6lkermarkt!5e0!3m2!1sde!2sat!4v1646301366319!5m2!1sde!2sat" width="100%" height="330px" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
          </div>
          <div class="col-md-4">
            <div class="left-content">
              <h4>Der Standort zeigt unsere Produktionshalle</h4>
              <p>hier fertigen wir alle unsere Produkte aus Stahl, Cortenstahl, Aluminium und vielem mehr</p>
              <ul class="social-icons">
                <li><a href="https://www.fb.me/alcmetalltechnik"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.instagram.com/pooldecks.eu/"><i class="fa fa-instagram"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="send-message margindown">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="section-heading">
              <h2>Nutzen Sie gerne unser Kontaktformular</h2>
            </div>
          </div>
          <div class="col-md-8">
            <div class="contact-form">
              <form id="contact" action="" method="post">
                <div class="row">
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="name" type="text" class="form-control" id="name" placeholder="Ihr Name" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="email" type="text" class="form-control" id="email" placeholder="Ihre E-Mail Adresse" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="tel" type="text" class="form-control" id="tel" placeholder="Auf Wunsch Ihre Telefonummmer">
                    </fieldset>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <fieldset>
                      <input name="subject" type="text" class="form-control" id="subject" placeholder="Um was geht es?" required="">
                    </fieldset>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                    <fieldset>
                      <textarea name="message" rows="6" class="form-control" id="message" placeholder="Ihre Nachricht" required=""></textarea>
                    </fieldset>
                  </div>

                  <div class="col-lg-12">
                    <fieldset>
                      <div class="g-recaptcha" data-sitekey="6Lcrd88eAAAAAKpGc4qQDUKDkTGiEmvRQHxbPhfU"></div>
                      <button type="submit" id="form-submit" class="filled-button">Nachricht Abschicken</button>
                    </fieldset>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="col-md-4">
            <ul class="accordion">
              <li>
                  <a>Fragen zur Lieferung pder Abrechnung?</a>
                  <div class="content">
                      <p>Viele Antworten finden Sie recht schnell in unseren FAQs</p>
                  </div>
              </li>
              <li>
                  <a>Ich brächte ein Gesamtangebot für meinen Garten</a>
                  <div class="content">
                      <p>Kein Problem, bitte kontaktieren und gleich Pläne/Fotos anhängen</p>
                  </div>
              </li>
              <li>
                  <a>Bei mir geht das nicht</a>
                  <div class="content">
                      <p>Technische Probleme? dann bitte einfach melden, ein kleiner Fehler kann immer passieren</p>
                  </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <script src="https://www.google.com/recaptcha/enterprise.js?render=6Lcrd88eAAAAAKpGc4qQDUKDkTGiEmvRQHxbPhfU"></script>
    <script>
    grecaptcha.enterprise.ready(function() {
        grecaptcha.enterprise.execute('6Lcrd88eAAAAAKpGc4qQDUKDkTGiEmvRQHxbPhfU', {action: 'validate_captcha'}).then(function(token) {
           document.getElementById('g-recaptcha-response').value = token;
        });
    });
    </script>

    {% endblock %}