<h1>
    <i class="fa fa-envelope"></i> Inbox</span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="breadcrumb">
    <li ng-click="ctrl.mail = null">List</li>
    <li ng-if="ctrl.mail != null">{{ ctrl.mail.subject }}</li>
</ul>


<div class="padding" ng-if="ctrl.mail == null" style="height: 490px; overflow-y: auto;">
    <table class="big hovered" ng-if="settings.mails.length != 0">
        <thead>
        <tr class="color-silver">
            <th></th>
            <th localize="sender"></th>
            <th localize="subject"></th>
            <th localize="day"></th>
        </tr>
        </thead>
        <tbody>
            <tr ng-repeat="mail in settings.mails | orderBy: '-time' track by mail.id" ng-click="ctrl.openMail(mail)" ng-class="{ 'text-bold': !mail.read }">
                <td></td>
                <td>{{ ::mail.sender }}</td>
                <td>{{ ::mail.subject }}</td>
                <td localize="topbar_day" localize-data-day="{{ ::mail.day }}"></td>
            </tr>
        </tbody>
    </table>
    <p ng-if="settings.mails.length == 0" localize="your_inbox_empty"></p>
</div>

    <div class="padding" ng-if="ctrl.mail != null">
    <h3 style="margin-top: 0;">{{ ctrl.mail.subject}}</h3>
    <div class="border-bottom" style="padding-bottom: 5px" localize="email_info" localize-data-sender="ctrl.mail.sender" localize-data-day="{{ ::ctrl.mail.day }}"></div>
    <div class="margin-top padding" style="height: 310px; overflow-y: scroll; margin-bottom: 10px; white-space: pre-line" ng-bind-html="ctrl.mail.message"></div>
    <div>
        <button type="button" class="red pull-right" ng-click="ctrl.deleteMail(ctrl.mail)" localize="delete"></button>
        <button type="button" class="cancel pull-right" style="margin-right: 5px;" ng-click="ctrl.mail = null" localize="back"></button>
    </div>
</div>