{% extends "twocols.html" %}{% load i18n lib_tags webmail_tags %}
{% load static %}
{% block pagetitle %}Webmail{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href="{% static 'jquery-ui/themes/base/all.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'modoboa_webmail/css/webmail.css' %}" />
{% endblock %}

{% block extra_js %}
<script type="text/javascript" src="{% static 'jquery-ui/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<script type="text/javascript" src="{% static 'js/history.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.htmltable.js' %}"></script>
<script type="text/javascript" src="{% static 'js/searchbar.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.infinitescroll.js' %}"></script>
<script type="text/javascript" src="{% static 'modoboa_webmail/js/webmail.js' %}"></script>
<script type="text/javascript">
var webmail = undefined;

$(document).ready(function() {
    webmail = new Webmail({
        poller_interval: {{ refreshrate }},
        poller_url: "{% url 'modoboa_webmail:unseen_messages_check' %}",
        listing_url: "{% url 'modoboa_webmail:index' %}?action=listmailbox",
        move_url: "{% url 'modoboa_webmail:mail_move' %}",
        submboxes_url: "{% url 'modoboa_webmail:submailboxes_get' %}",
        delattachment_url: "{% url 'modoboa_webmail:attachment_delete' %}",
        contactListUrl: {% if contacts_plugin_enabled %}"{% url 'api:emailaddress-list' %}"{% else %}null{% endif %},
        deflocation: "{{ deflocation }}",
        defcallback: "{{ defcallback }}",
        ro_mboxes: {% tolist ro_mboxes %},
        trash: "{{ trash }}",
        hdelimiter: '{{ hdelimiter }}',
        mboxes_col_width: {{ mboxes_col_width }}
    });
});
</script>
{% endblock %}

{% block leftcol %}
<div class="leftcol-heading text-center">
  <a name="compose" class="btn btn-success btn-lg" href="compose">
    <span class="fa fa-edit"></span>
    {% trans "Compose" %}
  </a>
</div>

<div id="folders">
  {{ mboxes }}
</div>

<div id="left-toolbar" class="row">
  <div class="col-sm-2">
    <div id="mboxactions" class="btn-group dropup">
      <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
        <span class="fa fa-cog"></span>
      </button>
      {% mboxes_menu %}
    </div>
  </div>
  {% if quota != -1 %}
  <div id="quotabox" class="col-sm-10">
    <div id="quotabar" class="progress">
      <div class="progress-bar {% progress_color quota %}" role="progressbar" style="width: {{ quota }}%" aria-valuenow="{{ quota }}" aria-valuemin="0" aria-valuemax="100">{{ quota }}%</div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block apparea %}
<div id="menubar" role="navbar"></div>
<div id="listing"></div>

{% endblock %}