{% load static cms_tags %}
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="{% static 'digitalglarus/bower_components/jquery/dist/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'digitalglarus/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
    <link href="{%  static 'digitalglarus/bower_components/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% get_static_prefix %}membership.css" rel="stylesheet" type="text/css">
    <link href="{% get_static_prefix %}stylesheet.css" rel="stylesheet" type="text/css">

</head>
<body lang="{{ language_code }}">
<div class="cover">
    <div class="navbar">
        <div class="pull-right u_P user">
            {% if request.user.is_authenticated %}
                <div class="user"><i class="fa fa-2x fa-user"
                                     aria-hidden="true"></i>{{ request.user.name }} (<a href="{% url 'logout_glarus' %}">Logout</a>)</div>
            {% else %}
                <a href="{% url 'login_glarus' %}"> Login </a>
            {% endif %}
        </div>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#navbar-ex-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% page_url 'digital-glarus-page' %}"><span>Digital Glarus</span></a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-ex-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="{% page_url 'digital-glarus-page' %}">Home</a>
                    </li>
                    <li class="active">
                        <a href="{% url 'digitalglarus:contact' %}">Contacts</a>
                    </li>

                    <li>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    {% load static %}

    <div class="cover-image"
         style="background-image : url('{% get_static_prefix %}photo-1418479631014-8cbf89db3431 2.jpg')"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="text-inverse">When do you want to cowork?</h2>

                <p class="text-inverse">Pick a date!</p>
                <button class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Calender
                </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Pick coworking date.</h4>
                            </div>
                            <div class="modal-body">
                                {% include 'calendar/calendar.html' %}
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="close" class="btn btn-default"
                                        data-dismiss="modal">Close
                                </button>
                                <button type="button" id='bookdate' class="btn btn-primary">Book date
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center">Become a member!</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-center">Become our member of Digital Glarus!&nbsp;</p>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="https://ununsplash.imgix.net/photo-1423753623104-718aaace6772?w=1024&amp;q=50&amp;fm=jpg&amp;s=1ffa61419561b5c796bca3158e7c704c"
                     class="img-responsive">
            </div>
            <div class="col-md-6">
                <h2 class="text-muted">The Spontaneous</h2>

                <h3>35CHF/Month (1 day pass included)</h3>

                <p>Do you dream of having a place to be inspired in the middle of the Alps?
                    With only 35CHF a month, you can enjoy the full benefit of a Digital Chalet
                    Schwanden membership! You can enjoy high speed network connection and comfortable
                    working desks where you can come up with best ideas for your project surrounded
                    by friendly coworkers. And if your work gets too productive to leave, you
                    can crash on our guest bed for the night, the house has everything a coworker
                    needs from an equipped kitchen to a shower. The Spontaneous includes 1
                    day pass included, it is perfect for you if you are planning a retreat
                    month of a coworking in the nature, or coming for a limited period to Switzerland
                    for coworking. It is a perfect try-out package!
                    <br>
                </p>
                <a class="btn btn-primary" href="{% url 'payment' time='month' %}">Buy Now</a>
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h2 class="text-muted">The Committed</h2>

                <h3>360CHF/Year (2 free day per month included)</h3>

                <p>Be a regular coworker in our Digital Chalet Schwanden! With only 360CHF,
                    you can enjoy the full coworking space for the whole year, with additional
                    2 free day passes for each month. It is an ideal deal for our busy and
                    active coworkers who would like to save time(and nerve)for requesting new
                    membership every month. Signifiantly discounted price is applied for yearly
                    membership.
                    <br>
                </p>
                <a class="btn btn-primary" href="{% url 'payment' time='year' %}">Buy Now</a>
            </div>
            <div class="col-md-6">
                <img src="https://unsplash.imgix.net/photo-1413834932717-29e7d4714192?w=1024&amp;q=50&amp;fm=jpg&amp;s=d9d6cbc32dd4968d0c21e331436a6af6"
                     class="img-responsive">
            </div>
        </div>
    </div>
</div>
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-center text-primary">A Quick Glance..</h2>

                <p class="text-center">A short guide for membership features.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>The Spontaneous</th>
                        <th>The Committed</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Includes</td>
                        <td>1 work day included</td>
                        <td>2 free work days per month</td>
                    </tr>
                    <tr>
                        <td>Fits for</td>
                        <td>Great for trial, see how it goes</td>
                        <td>Perfect for coworking with great price</td>
                    </tr>
                    <tr>
                        <td>Price</td>
                        <td>Decicde every month</td>
                        <td>Pay once per year</td>
                    </tr>
                    <tr>
                        <td>Membership price</td>
                        <td>35CHF/Month</td>
                        <td>360CHF/Year</td>
                    </tr>
                    <tr>
                        <td>Price per additional day</td>
                        <td>20 CHF</td>
                        <td>15 CHF</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<footer class="section section-primary">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h1>Digital Glarus</h1>

                <p>In der Au 7 8762 Schwanden
                    <br>Copyright © ungleich GmbH 2016</p>
            </div>
            <div class="col-sm-6">
                <p class="text-info text-right">
                    <br>
                    <br>
                </p>

                <div class="row">
                    <div class="col-md-12 hidden-lg hidden-md hidden-sm text-left">
                        <a href="#"><i class="fa fa-3x fa-fw fa-instagram text-inverse"></i></a>
                        <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                        <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                        <a href="#"><i class="fa fa-3x fa-fw fa-github text-inverse"></i></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 hidden-xs text-right">
                        <a href="https://twitter.com/DigitalGlarus"><i class="fa fa-twitter"></i></a>
                        <i class="fa fa-3x fa-fw fa-instagram text-inverse"></i>
                        <a href="#"><i class="fa fa-3x fa-fw fa-twitter text-inverse"></i></a>
                        <a href="#"><i class="fa fa-3x fa-fw fa-facebook text-inverse"></i></a>
                        <a href="https://github.com/ungleich"><i class="fa fa-github"></i></a>
                        <i class="fa fa-3x fa-fw fa-github text-inverse"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>


</body>
</html>