{% extends "wedding/blocks/base.html" %}
{% load easy_maps_tags %}
{% load static %}

{% block title %}
{{gride.first_initial}}&#x2764;{{broom.first_initial}}
{% endblock %}

{% block style %}
    .main-jumbotron {
        {% if request.user_agent.is_mobile and landing_page.mobile %}
        background-image: url({% static landing_page.mobile.background_image %});
        {% else %}
        background-image: url({% static landing_page.background_image %});
        {% endif %}
        background-size: cover;
        background-position: top; /* Centers - top to avoid head chop-off */
        height: 100vh;
        margin-bottom:-50px;
        color: {{ landing_page.info_color }};
    }
    {% if request.user_agent.is_mobile %}
    {% if landing_page.mobile %}
    .jumbotron-info {
        margin-top: {{ landing_page.mobile.info_margin_top }};
    }
    {% endif %}
    {% else %}
    .jumbotron-info {
        {% if landing_page.info_pos == "center" %}
        margin: 0 auto;
        {% elif landing_page.info_pos == "left" %}
        margin-right: 66.7%;
        {% elif landing_page.info_pos == "right" %}
        margin-left: 66.7%;
        {% endif %}
        margin-top: {{ landing_page.info_margin_top }};
    }
    {% endif %}
{% endblock %}

{% block content %}
<!-- Intro picture/info -->
<div class="main-jumbotron jumbotron">
  <div class="jumbotron-info text-center">
    <h1 class="main-header-text">
      {{ gride.first_name }} {{ gride.last_name }}
        <br>
      <span class="glyphicon glyphicon-heart" style="font-size:6vmin"></span>
        <br>
      {{ broom.first_name }} {{ broom.last_name }}
    </h1>
    <p class="venue-date-text">
    {{ ceremony.date|date:"m "}} · {{ ceremony.date|date:"d" }} · {{ ceremony.date|date:"y" }}
    </br>
    {{ ceremony.location.name }} - {{ ceremony.location.city }} - {{ ceremony.location.state }}
    </p>
  </div>
</div>
{% endblock %}
