{% extends 'base/base.html' %}
{% load static %}
{% block title %} foss@amrita {% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'home/css/home.css' %}"/>
{% endblock %}

{% block body %}
    <div class="site-wrapper">

        <div class="site-wrapper-inner">

            <div class="cover-container">

                <div class="masthead clearfix">
                    <div class="inner">
                        <h3 onclick="arrow_click()" class="masthead-brand">FOSS@Amrita <i id="arrow" class="fa fa-angle-down"></i> </h3>
                        <nav class="nav nav-masthead" id="nav-list">
                            <a class="nav-link" href="{% url 'workshop_list' %}">Workshops</a>
                            <a class="nav-link" href="{% url 'achievements' %}">Achievements</a>
                            <a class="nav-link" href="{% url 'profile_list' %}">Members</a>
                            <a class="nav-link" href="{% url 'category_list' %}">Resources</a>
                            {% if request.user.is_authenticated %}
                                <a class="nav-link" href="{% url 'profile' request.user.id %}">{{ request.user.username }}</a>
                                <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                            {% else %}
                                <a class="nav-link" href="{% url 'join' %}">JoinUs</a>
                                <a class="nav-link" href="{% url 'foss_intro' %}#seventh">Contact</a>
                                <a class="nav-link" href="{% url 'login' %}">Login</a>
                            {% endif %}
                        </nav>
                    </div>
                </div>

                <div class="inner cover" id="cover">
                    <h1 class="cover-heading">Your freedom begins here</h1>
                    <p class="lead cover-content">FOSS@Amrita is one of the most active student communities at Amrita University. We
                        encourage, support and mentor students to improve their technical and social skills.<br><br> We have opened the registration for 2018 batch. Click JoinUs and fill up the form to consider your application.</p>
                    <p class="lead cover-content">
                        <a href="{% url 'foss_intro' %}" class="btn btn-lg btn-transparent btn-secondary">Learn more</a>
                    </p>
                </div>

                <div class="mastfoot">
                    <div class="inner cover-footer-text">
                        <p>
                            <a class="footer-icons" href="https://github.com/amfoss/"><i class="fa fa-github-alt fa-2x"></i></a>
                            <a class="footer-icons" href="https://www.facebook.com/amfoss.in"><i class="fa fa-facebook fa-2x"></i></a>
                            <a class="footer-icons" href="https://twitter.com/amfoss_in"><i class="fa fa-twitter fa-2x"></i></a>
                            <a class="footer-icons" href="https://plus.google.com/107405104458420547482"><i class="fa fa-google-plus fa-2x"></i></a>
                        </p>
                        <p>Maintained by: <a href="http://foss.amrita.ac.in/club/teams/3/">WebTeam</a> , <a href="http://foss.amrita.ac.in/">FOSS@Amrita</a>.</p>
                    </div>
                </div>

            </div>

        </div>

    <style>
        #arrow {
            display: none;
        }
        @media only screen and (max-width: 500px) {
            .nav {
                display: block;
                margin-top: 20px;
                font-size: large;

            }
            .nav-masthead .nav-link + .nav-link {
                margin-left: 0; !important;
            }
            #arrow {
                display: inline;
            }
        }
    </style>

    <script>
        function arrow_click() {
            var arrow = document.getElementById('arrow');
            var nav_list = document.getElementById('nav-list');
            var cover = document.getElementById('cover');
            if ($(window).width() < 550) {
                if (nav_list.style.display === 'none') {
                    nav_list.style.display = 'block';
                    arrow.className = "fa fa-angle-up";
                    cover.style.marginTop = '';
                }
                else {
                    nav_list.style.display = 'none';
                    arrow.className = "fa fa-angle-down";
                    cover.style.marginTop = '20%';
                }
            }
        }
    </script>

    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'promotion/js/jquery.min.js'%}"></script>
    <script>
        $(window).load(function() {
            //resize just happened, pixels changed
            if ($(window).width() < 550) {
                $("#nav-list").hide();
                document.getElementById('cover').style.marginTop = '20%';
            }
        });
    </script>
{% endblock %}
