{% load static from staticfiles %}
{% load dj_markdownify %}
{% load djcms_blog %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as languages %}
<!DOCTYPE html>
<html>

<head>
	<!-- Standard Meta -->
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="robots" content="index, follow">
    <meta name="description" content="{{ object.bio }}" />
    <meta name="keywords" content="{{ object.bio }}" />

	<!-- Site Properities -->
	<title>{% blog_title %}{% block title %}{% endblock %}</title>
	<link href="https://fonts.googleapis.com/css?family=Lato|Nanum+Pen+Script" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,800,900" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static 'djcms_blog/css/semantic.min.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'djcms_blog/css/djcms_blog.css' %}">
    {% comment %} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1"
        crossorigin="anonymous"> {% endcomment %}
    {% block block_header %} {% autoescape off %} {{ object.block_header }} {% endautoescape %} {% endblock block_header %}
    {% comment %} {% markdown_code_css 'dracula' %} {% endcomment %}
    <style>
        .ui.primary.inverted.segment {
            background-image: url({{ object.cover_img_url }}) !important;
            background-attachment: fixed;
            background-position: 50% 20%;
        }

        .ui.footer.inverted.segment {
            background-image: url({% static 'djcms_blog/img/index-bg.jpg' %}) !important;
            background-position: 20% 20%;
        }
        .masthead {
            height: 350px !important;
        }
    </style>
</head>

<body id="top">
	<div class="pusher">
		<div class="ui inverted primary vertical masthead center aligned segment">

			<div class="ui container">
				<div class="ui large secondary pointing menu masterhead-nav">
					<a class="toc item">
						<i class="sidebar icon"></i>
					</a>
					<a href="{% blog_url %}" class="item">{% blog_root_title %}</a>
					{% block navigation %}{% endblock navigation %}
				</div>
			</div>
			<div class="ui container author-masterhead">
                <h1 class="blog-name">{% block blog-name %} {{ object.title }}{{ object.name }} {% endblock blog-name %}</h1>
                <p class="blog-description">{{ object.description }}</p>
			</div>
		</div>

		<!-- <div class="ui borderless main menu always-top"> -->
		<div class="ui borderless top fixed menu transition hidden secondary-nav">
			<div class="ui container">
				<a href="{% blog_url %}" class="header item">
					<img class="ui circular image logo" src="{% blog_navbar_image %}"> {% blog_root_title %}
				</a>
				{% block nav_navigation %}{% endblock %}
			</div>
		</div>
		<div class="ui container author-content">
			{% block content %}{% endblock content %}
		</div>
		<div class="ui inverted vertical footer segment">
			<div class="ui container">
				<div class="ui stackable inverted divided equal height stackable grid">
                    <div class="seven wide column">
                        {% block footer_left %}{% endblock footer_left %}
                    </div>
                    <div class="three wide column">
                        {% block footer_center %}{% endblock footer_center %}
                    </div>
                    <div class="three wide column">
                        {% block footer_right %}{% endblock footer_right %}
                    </div>
				</div>
			</div>
		</div>
	</div>
	<script src="{% static 'djcms_blog/js/jquery.min.js' %}"></script>
    <script src="{% static 'djcms_blog/js/semantic.min.js' %}"></script>
    <script src="{% static 'djcms_blog/js/jquery-scrollspy.js' %}"></script>
    <script src="{% static 'djcms_blog/js/jquery.easing.min.js' %}"></script>
	<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
	<script>
		$(document)
			.ready(function () {
				// fix menu when passed
				$('.masthead')
					.visibility({
						once: false,
						onBottomPassed: function () {
							$('.fixed.menu').transition('fade in');
							$('.fixed.menu').removeClass('hidden');
							$('.fixed.menu').addClass('visible');
						},
						onBottomPassedReverse: function () {
							$('.fixed.menu').transition('fade out');
							$('.fixed.menu').addClass('hidden');
							$('.fixed.menu').removeClass('visible');
						}
					})
					;

				// create sidebar and attach to menu open
				$('.ui.sidebar')
					.sidebar('attach events', '.toc.item')
					;

			});
	</script>
	<script type="text/javascript">
		$('.ui.sticky')
			.sticky();
		;
	</script>
	{% autoescape off %}
        {% markdown_code_js %}
	    {% markdown_code_js_init %}
    {% endautoescape %}
	<script>
		$('.special.cards .image').dimmer({
			on: 'hover'
		});
	</script>
	
	{% block extra_js %}{% endblock %}
    {% block block_footer %} {% autoescape off %} {{ object.block_footer }} {% endautoescape %} {% endblock block_footer %}
</body>

</html>
