{% load static %}

<section id="contact" class="contact section-bg">
  <div class="container" data-aos="fade-up">

    <div class="section-title">
      <h2>Contact</h2>
      <p>{{ contact.desc | safe }}</p>
    </div>

    <div class="row">

      <div class="col-lg-6">

        <div class="row">
          <div class="col-md-12">
            <div class="info-box" data-aos="fade-up">
              <i class="bx bx-{{ contact.info1.bx }}"></i>
              <h3>{{ contact.info1.title }}</h3>
              {% if contact.info1.link %}
              <a href="{{ contact.info1.contents }}" target="_blank">{{ contact.info1.contents }}</a>
              {% else %}
              <p>{{ contact.info1.contents | safe }}</p>
              {% endif %}
            </div>
          </div>
          {% if contact.info3 %}
          <div class="col-md-6">
          {% else %}
          <div class="col-md-12">
          {% endif %}
            <div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
              <i class="bx bx-{{ contact.info2.bx }}"></i>
              <h3>{{ contact.info2.title }}</h3>
              {% if contact.info2.link %}
              <a href="{{ contact.info2.contents }}" target="_blank">{{ contact.info2.contents }}</a>
              {% else %}
              <p>{{ contact.info2.contents | safe }}</p>
              {% endif %}
            </div>
          </div>
          {% if contact.info3 %}
          <div class="col-md-6">
            <div class="info-box mt-4" data-aos="fade-up" data-aos-delay="100">
              <i class="bx bx-{{ contact.info3.bx }}"></i>
              <h3>{{ contact.info3.title }}</h3>
              {% if contact.info3.link %}
              <a href="{{ contact.info3.contents }}" target="_blank">{{ contact.info3.contents }}</a>
              {% else %}
              <p>{{ contact.info3.contents | safe }}</p>
              {% endif %}
            </div>
          </div>
          {% endif %}
        </div>

      </div>

      <div class="col-lg-6 mt-4 mt-lg-0">
        <!-- url 태그 안에 앵커 이동 가능하다 -->
        <form action="{% url 'bocor:home' %}#contact" method="POST" role="form" class="php-email-form  w-100" data-aos="fade-up">
          {% csrf_token %}
          <div class="row">
            <div class="col-md-6 form-group">
              {{ form.name }}
            </div>
            <div class="col-md-6 form-group mt-3 mt-md-0">
              {{ form.email }}
            </div>
          </div>
          <div class="form-group mt-3">
            {{ form.message }}
          </div>
          <div class="my-3">
            {% if post_message %}
            <div class="alert alert-success alert-dismissible fade show " role="alert">
              {{ post_message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endif %}
          </div>
          <div class="text-center"><button type="submit">문의하기</button></div>
        </form>
      </div>

    </div>

  </div>
</section>