{% load flatpages %}
{% load static %}

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FET: {% block title %}Startseite{% endblock %}</title>

	<meta name="author" content="Fachschaft Elektrotechnik (FET)">
	<meta name="description" content="Die Fachschaft Elektrotechnik besteht aus ET Studierenden, die sich um die Anliegen der Studenten und Studentinnen kümmern.">
	<meta property="og:image" content="#"> <!--og:... = Facebook metadata-->
	<meta property="og:description" content="Die Fachschaft Elektrotechnik besteht aus ET Studierenden, die sich um die Anliegen der Studenten und Studentinnen kümmern.">
	<meta property="og:title" content="Fachschaft Elektrotechnik (FET)">
	<meta name="twitter:title" content="Fachschaft Elektrotechnik (FET)">
	<meta name="theme-color" content="#006599">

    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon.png' %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicons/favicon-32x32.png' %}">
    <!--<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicons/favicon-16x16.png' %}">-->
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/fet_logo_white.png' %}">
    <link rel="manifest" href="{% static 'img/favicons/site.webmanifest' %}">
    <link rel="mask-icon" href="{% static 'img/favicons/safari-pinned-tab.svg' %}" color="#000000">
    <link rel="shortcut icon" href="{% static 'img/fet_logo_white.png' %}">
	<meta name="apple-mobile-web-app-title" content="FET - Fachschaft Elektrotechnik">
	<meta name="application-name" content="FET - Fachschaft Elektrotechnik">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    
	<link rel="stylesheet" href="{% static 'css/styles.css' %}">
	<!-- FontAwesome Kit -->
	<!--<script src="https://kit.fontawesome.com/fb26f70535.js" crossorigin="anonymous"></script>-->
    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">

    <!-- Prism.js Theme -->
	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css"> -->
	<link rel="stylesheet" href="{% static 'css/prism-one-dark.min.css' %}">
    
	<!-- Fonts -->
	<link rel="stylesheet" href="{% static 'fonts/Inter-3.19/inter.css' %}">
	<!-- <link rel="stylesheet" href="{% static 'fonts/Poppins-4.003/poppins.css' %}"> -->
	<link rel="stylesheet" href="{% static 'fonts/Besley-2.0/besley.css' %}">
    <link rel="stylesheet" href="{% static 'fonts/Fira_Code-6.2/fira_code.css' %}">

    {% block galleryheader %}
    {% endblock %}
    {% block extraheader %}
    {% endblock %}
</head>

<body x-data="{ showModal: false }" :class="{ 'overflow-y-hidden sm:overflow-y-auto': showModal }">
	<!-- NAVBAR -->
	<nav class="navbar" x-data="{ showNavBar: false }">
		<div>
            <a href="{% url 'home' %}">
                <img src="{% static 'img/FET-Logo-2014_64_light.svg' %}" alt="FET-Logo" class="navbar-logo p-2 dark:hidden">
				<img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block">
			</a>
			<button class="navbar-toggle"
				@click="showNavBar = ! showNavBar"
			>
				<i class="fas fa-bars"></i>
			</button>
			<ul id="navBarContent" class="navbar-content sm:block"
				x-show="showNavBar || $screen('sm')"
				x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="transform opacity-0 scale-90"
				x-transition:enter-end="transform opacity-100 scale-100"
				x-transition:leave="transition ease-in duration-150"
				x-transition:leave-start="transform opacity-100 scale-100"
				x-transition:leave-end="transform opacity-0 scale-90"
			>
				<li><a href="{% url 'posts:index' %}">News</a></li>
				<li><a href="{% url 'members:members' 'active' %}">Fachschaft</a></li>
				<li><a href="{% url 'gallery:index' %}">Galerie</a></li>
				<li><a href="{% url 'blackboard:index' %}">Blackboard</a></li>

                {% get_flatpages '/kontakt/' as pages %}
                {% if pages %}
				    <li><a href="{{ pages.first.url }}">{{ pages.first.title }}</a></li>
                {% endif %}

                {% if not request.user.is_authenticated %}
                    <li><a href="{% url 'authentications:login' %}?next={{ request.path }}">Anmelden</a></li>
                {% else %}
                    <hr class="border-proprietary">
                    <div href="#" class="inline-block w-full sm:w-auto rounded relative"
                        x-data="{ showPopupNav: false }"
                        @click.outside="showPopupNav = false"
                    >
                        <div class="sm:inline-flex items-center divide-x divide-blue-200 dark:divide-proprietary-light bg-proprietary-dark text-blue-50 rounded">
						    <a class="hidden sm:block flex-1 px-2 py-1 hover:bg-proprietary-dark dark:hover:bg-proprietary-darker active:bg-proprietary-dark dark:active:bg-proprietary-darker rounded-l" href="#"
                                @click="showPopupNav = !showPopupNav"
                            >
                                {% if request.user.first_name %}
                                    Hallo {{ request.user.first_name }}
                                {% else %}
                                    Hallo {{ request.user.username }}
                                {% endif %}
                            </a>
                            <a class="hidden sm:block flex-0 px-2 py-1 hover:bg-proprietary-dark dark:hover:bg-proprietary-darker active:bg-proprietary-dark dark:active:bg-proprietary-darker rounded-r" href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a>
                        </div>
                        <div class="sm:block sm:absolute z-20 top-9 right-0 bg-white dark:bg-transparent dark:sm:bg-gray-700 sm:shadow-md sm:rounded w-full dark:sm:text-proprietary-lightest"
                            x-show="showPopupNav || !$screen('sm')"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="transform origin-top opacity-0 scale-95"
                            x-transition:enter-end="transform origin-top opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="transform origin-top opacity-100 scale-100"
                            x-transition:leave-end="transform origin-top opacity-0 scale-95"
                        >
                            <li class="navInternal"><a href="{% url 'admin:index' %}"><i class="fa-fw fa-solid fa-user-secret mr-2"></i>Admin</a></li>
                            <li class="navInternal"><a href="{% url 'tasks:index' %}"><i class="fa-fw fa-solid fa-list-check mr-2"></i>Tasks</a></li>
                            <li class="navInternal"><a href="{% url 'intern:index' %}"><i class="fa-fw fa-solid fa-database mr-2"></i>Intern</a></li>
                            <li class="navInternal"><a href="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-database mr-2"></i>Legacy</a></li>
                            <li class="navInternal"
                                x-show="!$screen('sm')"
                            ><a href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-fw fa-solid fa-power-off mr-2"></i>Abmelden</a></li>
                        </div>
                    </div>
                {% endif %}
			</ul>
		</div>
	</nav>

    {% block content %}
    {% endblock %}

    <footer>
        <ul class="icon-list">
            <li>
                <a href="{% url 'facebook' %}"><i class="fab fa-facebook"></i></a>
            </li>
            <li>
                <a href="{% url 'instagram' %}"><i class="fab fa-instagram"></i></a>
            </li>
            <li>
                <a href="{% url 'discord' %}"><i class="fab fa-discord"></i></a>
            </li>
            <li>
                <a href="{% url 'telegram' %}"><i class="fab fa-telegram"></i></a>
            </li>
            <li>
                <a href="mailto:service@fet.at"><i class="fas fa-envelope"></i></a>
            </li>
        </ul>
        {% get_flatpages '/impressum/' as pages %}
        {% if pages %}
            <div class="legal">
                <a href="{{ pages.first.url }}" class="text-center text-sm sm:text-base">{{ pages.first.title }}</a>
            </div>
        {% endif %}            
        <hr class="legal-divider">
        <p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
    </footer>
    <div class="super-duper-awesome-signature" x-data="{ counter: 0 }">
        <span :class="counter>=4 && 'text-purple-300'">Handcrafted </span>
        <span :class="counter>=5 && 'text-green-400'">with </span>
        <i class="fa-solid fa-heart" aria-label="love" @click="counter++" :class="counter>=2 ? 'text-proprietary hover:text-proprietary-dark' : 'text-red-600 hover:text-red-700'"></i>
        <span :class="counter>=6 && 'text-pink-400'"> by</span>
        <span class="font-normal" :class="counter>=3 && 'text-yellow-500'"> Matteo Duchscher</span>
    </div>

    <script src="{% static 'js/gumshoe@5.1.1.js' %}"></script>
    <script src="{% static 'js/smooth-scroll@16.1.2.js' %}"></script>

    <script defer src="{% static 'js/vendor.js' %}"></script>
    <script defer src="{% static 'js/scripts.js' %}"></script>
	<!-- Prism.js Code syntax highlighting -->
	<script src="{% static 'js/prism-core@1.25.0.js' %}"></script>
	<script src="{% static 'js/prism-autoloader@1.25.0.js' %}"></script>
    
	<script>
		var spy = new Gumshoe('#scrollspy-subNav a', {
			/***** Scrollspy *****/ // Active classes
			navClass: 'active', // applied to the nav list item
		});

		/***** SmoothScroll *****/ // All animations will take exactly 500ms
		var scroll = new SmoothScroll('a[href*="#"]', {
			speed: 750,
			speedAsDuration: true,
			easing: 'easeInOutQuad'
		});
    </script>

</body>
</html>