{% extends "base.html" %}
{% block body %}

<div style="margin-top:5px" class="card border-0 shadow" id="feed">
    <div class="card-header bg-header border border-dark shadow text-white">
        <h2 style="display:inline-block"><span class="operator">Live</span> Event Feed</h2>
        <span style="display:inline-block; float:right">
            <span class="input-group" >
                <div class="input-group-append input-group-btn" ><button type="button" class="btn btn{{config['outline-buttons']}}info" @click="load_more()">Load More</button></div>
                <div class="input-group-append input-group-btn" ><button type="button" class="btn btn{{config['outline-buttons']}}info" @click="load_next_error()">Load Next Error</button></div>
                <div class="input-group-append"><input style="color:white" class="form-control" type="text" size="50rem" placeholder="filter with 'column title:value'" id="filter" v-model="filter"></div>
                <div class="input-group-append input-group-btn" ><button disabled type="button" class="btn btn{{config['outline-buttons']}}secondary"><i class="fa fa-filter"></i></button></div>
                <div class="input-group-append input-group-btn" v-if="filter !== ''">
                    <button type="button" class="btn btn{{config['outline-buttons']}}danger" @click="delete_in_view()"><i class="fas fa-trash-alt"></i> All Matching</button>
                </div>
            </span>
        </span>
    </div>
    <div id="feed_table" style="overflow-y:auto;height:calc(75vh);padding:0;" class="card-body bg-card-body border border-dark shadow" >
        <table v-if="events.length > 0" class="table table-condensed table-striped {{config['table-color']}}" style="word-wrap: break-word;table-layout: fixed;margin-bottom:0">
            <tr>
                <th class="sticky-top" style="width:2rem"></th>
                <th class="sticky-top" style="width:12rem">Time</th>
                <th class="sticky-top" style="width:10rem">Operator</th>
                <th class="sticky-top">Message</th>
            </tr>
            <tr v-for="entry in events" :key="entry.id" v-if="apply_filter(entry)" :style="entry_color(entry)">
                <td>
                    <button type="button" class="btn btn-sm btn{{config['outline-buttons']}}danger" @click="delete_message(entry)">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
                <td style="padding-left:10px"><pre>[[toLocalTime(entry.timestamp)]]</pre></td>
                <td>
                    [[entry.operator]]
                    <template v-if="entry.count > 1">([[entry.count]])</template>
                    <template v-if="entry.level === 'warning' && entry.resolved">
                        <br><button type="button" class="btn btn-sm btn{{config['outline-buttons']}}secondary" @click="toggle_resolved(entry)">Unresolve</button>
                    </template>
                    <template v-else-if="entry.level === 'warning' && !entry.resolved">
                        <br><button type="button" class="btn btn-sm btn-success" @click="toggle_resolved(entry)">Resolve Issue</button>
                    </template>
                </td>
                <td>
                    <textarea @input="edit_message(entry)" :style="entry_color(entry)" :id="entry.id" :rows="message_rows(entry.message)" :value="entry.message" v-model="entry.message"></textarea>
                </td>
            </tr>
        </table>
    </div>
    <div class="card-footer bg-card-footer">
            <div class="input-group" style="margin:0!important;padding:5px">
                <textarea id="message" type="text" class="form-control" v-model="input_field"
                       placeholder="Send message to operation ..." aria-describedby="basic-addon1"
                       @keydown.enter="send_message($event)"
                       autocomplete="off"
                ></textarea>
                <div class="input-group-append">
                        <button :class="level === 'info' ? 'btn btn{{config['outline-buttons']}}success dropdown-toggle' :'btn btn{{config['outline-buttons']}}danger dropdown-toggle' " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  data-target="level_button">
                        <i class="fas fa-paper-plane 2x"></i>
                      </button>
                      <div class="dropdown-menu" id="level_button">
                          <button class="dropdown-item"  @click="level = 'info'">Send normal message</button>
                          <button class="dropdown-item"  @click="level = 'warning'">Send warning message</button>
                      </div>
                </div>
            </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
{% include "live_event_feed.js" %}
{% endblock %}

{% block body_config %}

{% endblock %}