{% extends 'website/base.html' %}
{% load static from staticfiles %}

{% block title %}Watermark Fine Papers{% endblock %}

{% block bodyclass %}home{% endblock %}

{% block content_wrapper %}
    <div class="introduction" id="home" style="background: #C4C0C0 url({{ banner.photo.url }}) no-repeat center top;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-repeat: no-repeat;">
        <img class="logo" src="{% static 'img/website/watermark-logo1x.png'%}"/>
        <div class="mobile_logo">
            <img src="{% static 'img/website/mobile-watermark-logo2x.png'%}"/>
        </div>
        <a href="#about">
            <img class="arrow" src="{% static 'img/website/arrow1x.png'%}" srcset="{% static 'img/website/arrow1x.png' %}, {% static 'img/website/arrow2x.png' %} 2x"/>
        </a>
    </div>
    <div class="about" id="about">
        <div id="myCarousel" class="carousel slide " data-ride="carousel">
            <div class="carousel-inner">
                {% for about in abouts %}
                <div class="item {% if forloop.first %}active{% endif %} {% if forloop.counter == 2 %}next{% endif %} background" style="background: #C4C0C0 url({{ about.photo.url }}) no-repeat center top;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-repeat: no-repeat;">
                    <div class="carousel-caption detail">
                        <p>{{ about.description|safe|linebreaks }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            <div class="main-banner-wrapper container">
            <ol class="carousel-indicators">
                {% for count in abouts_count %}
                <li data-target="#myCarousel" data-slide-to="{{ count }}" class="">
                    <span>{% if count < 9 %}0{% endif%}{{ count|add:"1" }}</span>
                </li>
                {% endfor %}     
            </ol>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <img src="{% static 'img/website/prev.png'%}"/>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <img src="{% static 'img/website/next.png'%}"/>
            </a>
            </div>
        </div>
    </div>
    <div class="work" id="work">
            <div id="myCarousel2" class="carousel slide " data-ride="carousel">
            <div class="carousel-inner">
                {% for work in works %}
                <div class="item {% if forloop.first %}active{% endif %} {% if forloop.counter == 2 %}next{% endif %} background" style="background: #C4C0C0 url({{ work.photo.url }}) no-repeat center top;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-repeat: no-repeat;">
                </div>
                {% endfor %}
            </div>
            <div class="main-banner-wrapper container">
            <ol class="carousel-indicators">
                {% for count in works_count %}
                <li data-target="#myCarousel2" data-slide-to="{{ count }}" class="">
                    <span>{% if count < 9 %}0{% endif%}{{ count|add:"1" }}</span>
                </li>
                {% endfor %}     
            </ol>
            <!-- Carousel nav -->
            <a class="carousel-control left" href="#myCarousel2" data-slide="prev">
                <img src="{% static 'img/website/prev.png'%}"/>
            </a>
            <a class="carousel-control right" href="#myCarousel2" data-slide="next">
                <img src="{% static 'img/website/next.png'%}"/>
            </a>
            </div>
        </div>
    </div>
    <div class="contact" id="contact">
        <div class="content">
            <div class="text">
                {{ contact.description|safe }}
            </div>

            <div class="sosmed">
                <a href="https://goo.gl/maps/xkBHesdbL5B2" target="_blank">
                    <img src="{% static 'img/website/icon-map1x.png'%}" srcset="{% static 'img/website/icon-map1x.png' %}, {% static 'img/website/icon-map2x.png' %} 2x"/>
                </a>
                <a href="mailto:info@watermarkfinepaper.com">
                    <img src="{% static 'img/website/icon-email1x.png'%}" srcset="{% static 'img/website/icon-email1x.png' %}, {% static 'img/website/icon-email2x.png' %} 2x"/>
                </a>
                <a href="https://instagram.com/watermarkfinepapers" target="_blank">
                    <img src="{% static 'img/website/icon-ig1x.png'%}" srcset="{% static 'img/website/icon-ig1x.png' %}, {% static 'img/website/icon-ig2x.png' %} 2x"/>
                </a>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script type="text/javascript">
        $('.carousel').carousel();
        $(".carousel-inner .item:first-child").addClass("active");
        $(".carousel-indicators li:first-child").addClass("active");
    </script>
{% endblock %}