{% extends "base_html.html" %}
{% load static %}

{% block title %}Mathics{% endblock %}

{% block html_head %}
<!-- including scriptaculous main does not work in Safari -->
<script type="text/javascript" src="{% static 'js/scriptaculous/builder.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scriptaculous/effects.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scriptaculous/dragdrop.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scriptaculous/controls.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scriptaculous/slider.js' %}"></script>
<script type="text/javascript" src="{% static 'js/scriptaculous/sound.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'js/scriptaculous/scriptaculous.js' %}"></script>-->
{% endblock %}

{% block html_body %}

<header>
<div id="headerleft">
  <img id="logo" class="load" src="{% static 'img/logo-heptatom.svg' %}" height="32" alt="Logo" />
  <img id="logotext" class="load" src="{% static 'img/logo-text.svg' %}" height="26" alt="Mathics" />

  <div class="menu">
    <a href="javascript:showOpen()" title="Open Worksheet"><i class="fa fa-file-text"></i></a>
    <a href="javascript:showSave()" title="Save Worksheet"><i class="fa fa-download"></i></a>
    <a href="javascript:createLink()" title="Generate Worksheet Input Hash"><i class="fa fa-share-alt"></i></a>
  </div>
</div>

<div id="headerright">
  <input id="search" type="text" /><a id="doclink" href="javascript:toggleDoc()" title="Docs"><i class="fa fa-lg fa-question-circle-o"></i></a>

  {% if require_login %}
  <div id="notAuthenticated" class="login">
    <a href="javascript:showLogin()" class="fa fa-lg fa-sign-in" title="Sign in"></a>
  </div>
  {% endif %}
  <div id="authenticated" class="login" style="display: none">
    <span id="username"></span><a id="logout" href="javascript:logout()" class="fa fa-lg fa-sign-out" title="Sign out"></a>
  </div>
</div>
</header>

<!-- Login -->
<script type="text/javascript">
  var REQUIRE_LOGIN = {% if require_login %}true{% else %}false{% endif %};
</script>

{% if user.is_authenticated %}
<script type="text/javascript">
  $(document).observe('dom:loaded', function() {
    onLogin("{{ user.email }}");
  });
</script>
{% endif %}

{% block main %}
{% endblock main %}

{% include "authentication.html" %}
{% include "inout.html" %}

{% endblock html_body %}
