{% extends "base.html" %}
{% load staticfiles %}
{%block page-content%}

<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
  <div class="container">
    <a class="navbar-brand" href="#">Anna & Dan</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#our-story">Our Story</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#details">Wedding Details</a>
        </li>
        <li class="nav-item">
          <a class="nav-link scroll-link" href="#rsvp">RSVP</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Top content -->
<div class="home" id="home">
  <div class="container">

    <div class="row">
      <div class="col-md-8 offset-md-2 text">
        <h1 class="wow fadeInLeftBig pb-5">Anna & Dan are getting married!</h1>

        <div class="top-big-link wow fadeInUp pt-5">
          <a class="btn btn-primary btn-link-1 scroll-link" href="#details">Get all the details</a>
          <a class="btn btn-primary btn-link-2 scroll-link" href="#rsvp">RSVP</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- About us -->
<div class="our-story-container section-container section-container-gray-bg" id="our-story">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-7 our-story-box wow fadeInLeft">
        <div class="our-story-box-text">
          <h3>About Us</h3>
          <p class="medium-paragraph">Despite having known each other throughout their time at SSU (go Vikings!), Anna and Dan had their first official date on December 11, 2014. They met for tea, and at the parlor Dan found Anna vivaciously correcting typos in an already published book. The rest is history!</p>
          <p>The lovely couple were promised two years later, on January 14th 2016. This is a tradition in Anna's family, and signifies the couples' committment to each other and to their future together.</p>
          <p>They took the next step on October 20, 2017 during a beautiful vacation at Disney World in Florida. During a night at Belle's Castle for a Halloween celebration, Dan (dressed like Prince Adam) got down on one knee to propose to Anna (dressed like Belle!). The rest of the night was filled with 'they're engaged!!!!!' and singing "Tale as Old as Time".</p>
          <p>...and shortly after, still at Disney, Anna reciprocated and proposed to Dan <i class="fas fa-heart"></i></p>
        </div>
      </div>
      <div class="col-12 col-lg-5 our-story-box wow fadeInUp">
        <div class="our-story-box-img">
          <img src="{% static 'img/about.jpg' %}" alt="Anna and Dan sitting and looking into each other's eyes" data-at2x="{% static 'img/about.jpg' %}">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- details -->
<div class="details-container section-container" id="details">
  <div class="container">
    <div class="row">
      <div class="col details section-description wow fadeIn">
        <h2>Our wedding details</h2>
        <div class="divider-1 wow fadeInUp"><span></span></div>
        <p>We can't wait to celebrate our future life together with all our friends and family. All details for the ceremony and registry are below.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4 details-box wow fadeInUp">
        <h3>When <i class="fas fa-angle-right"></i></h3>
        <div class="details-box-date"><i class="far fa-calendar"></i> October 20, 2019</div>
        <p>The ceremony will take place on October 20, 2019. It begin at 2pm with the reception following at 4pm.</p>
        <p>Add the events to your calendar with <a href="{% static 'files/Anna__Dans_Wedding_Schedule.ics' %}">this ICS file</a>, which can be imported into any kind of calendar.</p>
      </div>
      <div class="col-md-4 details-box wow fadeInDown">
        <h3>Where <i class="fas fa-angle-right"></i></h3>
        <div class="details-box-date"><i class="fas fa-map-signs"></i> beautiful North Shore of Massachusetts</div>
        <p>The wedding ceremony will take place at St. Ann's Church in Peabody, MA: <a href="https://goo.gl/maps/Rb2oaYKVbEb5qvtQA">140 Lynn St, Peabody, MA</a></p>
        <p>The reception will follow, at the Hellenic Community Center in Ipswich: <a href="https://goo.gl/maps/6vtU3wm1ynPK5ajv8">117 County Rd, Ipswich, MA</a> </p>
      </div>
      <div class="col-md-4 details-box wow fadeInUp">
        <h3>Registry <i class="fas fa-angle-right"></i></h3>
        <div class="details-box-date"><i class="fas fa-gift"></i> thank you!</div>
        <p>We are asking that folks contribute to our honeymoon trip to Disney World! Our trip registry is here: <a href="https://disney.honeymoonwishes.com/Honeymoon-Registry-388035-Walt-Disney-World-Resort-Anna-Andrews-Dan-Allen.html">https://disney.honeymoonwishes.com/Honeymoon-Registry-388035-Walt-Disney-World-Resort-Anna-Andrews-Dan-Allen.html</a></p>
      </div>
    </div>
  </div>
</div>

<!-- rsvp -->
<div class="rsvp-container section-container" id="rsvp">
  <div class="container">

    <div class="row">
      <div class="col rsvp section-description wow fadeIn">
        <h2>RSVP</h2>

        <p>Kindly let us know if you will be able to attend our wedding! On the back of your invitation should be a two-digit code. Please enter that in the box below, which will take you to a personalized RSVP form.</p>
        
        <form action="{% url 'rsvp' %}" method="get" class="form-inline justify-content-center">
            <label class="sr-only" for="rsvp-code">RSVP Code</label>
            <div class="input-group mr-2">
                <div class="input-group-prepend">
                <div class="input-group-text">
                    <i class="far fa-envelope-open"></i>
                </div>
                </div> 
                <input id="rsvp-code" name="rsvp-code" placeholder="RSVP Code" type="text" class="form-control" required="required">
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
            
      </div>
    </div>
  </div>
</div>
{%endblock%}