{% extends "base.html" %} {% load static %} {% block header %}
<link rel="stylesheet" type="text/css" href="{% static 'inbox.css' %}"> {% endblock %} {% block content %}
<div class="columns" id="mail-app">
    <aside class="column is-2 aside hero is-fullheight">
        <div>
            <aside class="menu">
                <p class="menu-label" style="color:#f2f2f2;">
                    Progress
                </p>
                <ul class="menu-list">
                    <li class="has-text-grey-light level" style="padding-left:10px;margin-bottom:0;font-size:14px">
                        <span class="level-left">Achievement</span>
                        <span class="level-right">[[ achievement ]]%</span>
                    </li>
                    <li>
                        <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
                    </li>
                </ul>
            </aside>
            <aside class="menu">

                <p class="menu-label" style="color:#f2f2f2;">
                    Labels
                </p>
                <ul class="menu-list">
                    <div class="control" v-for="(label, label_id) in labels">
                        <li class="tags has-addons">
                            <span class="tag is-primary">[[label.shortcut]]</span>
                            <a class="tag is-grey" v-on:click="addLabel(label.id)" v-shortkey.once="['ctrl', [[ label.shortcut ]]]" @shortkey="addLabel(label.id)">[[label.text]]</a>
                        </li>
                    </div>
                </ul>
            </aside>
        </div>
    </aside>
    <div class="column is-3 messages hero is-fullheight" id="message-feed">
        <div class="field has-addons" style="margin:0 10px;">
            <div class="control is-expanded">
                <input class="input" type="text" placeholder="Find a document" v-model="searchQuery" @keyup.enter="submit"
                style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
            </div>
            
            <div class="control">
                <div class="dropdown is-hoverable">
                    <div class="dropdown-trigger">
                        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
                            <span class="icon">
                                <i class="fas fa-angle-down" aria-hidden="true"></i>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
                        <div class="dropdown-content">
                            <a href="#" class="dropdown-item">
                                Default
                            </a>
                            <a class="dropdown-item">
                                Active
                            </a>
                            <a href="#" class="dropdown-item">
                                Complete
                            </a>
                            <a href="#" class="dropdown-item">
                                Probability
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="inbox-messages" id="inbox-messages" v-if="items.length">
            <div v-for="(msg, index) in items" class="card" v-bind:class="{ active: index == cur }" v-on:click="showMessage(index)" v-bind:data-preview-id="index">
                <div class="card-content" style="padding:1.2rem;">
                    <div class="msg-header">
                        <span class="msg-from">
                            <div class="field is-grouped is-grouped-multiline">
                                <div class="control" v-for="(annotation, index) in msg.labels">
                                    <div class="tags has-addons">
                                        <span class="tag is-dark">
                                            [[annotation.label.text]]
                                        </span>
                                        <span class="tag is-primary" v-if="annotation.label.prob">[[annotation.label.prob]]</span>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </div>
                    <div class="msg-snippet">
                        <p>[[ msg.text.slice(0, 100) ]]</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column is-7 message hero is-fullheight" id="message-pane">
        <div class="action-buttons">
            <div class="control is-grouped">
                <a class="button is-small" v-on:click="prevPage" v-shortkey="['ctrl', 'p']" @shortkey="prevPage">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <a class="button is-small" v-on:click="nextPage" v-shortkey="['ctrl', 'n']" @shortkey="nextPage">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </div>
        </div>
        <div class="box message-preview">
            <div class="top" v-if="items.length">
                <div class="field is-grouped is-grouped-multiline">
                    <div class="control" v-for="(annotation, index) in items[cur].labels">
                        <div class="tags has-addons">
                            <span class="tag is-dark">
                                <button class="delete is-small" v-on:click="deleteLabel(index)"></button>
                                [[ annotation.label.text ]]
                            </span>
                            <span class="tag is-primary" v-if="annotation.label.prob">[[ annotation.label.prob ]]</span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="content">
                    <p style="line-height:2">[[ items[cur].text ]]</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="{% static 'main.js' %}"></script>
{% endblock %}