<div class="c-notebook">
    <div class="c-notebook__head">
        <search class="c-notebook__search"
                :value="entrySearch"
                @input="search"
                @clear="search">
            </search>
        <div class="c-notebook__controls ">
            <select class="c-notebook__controls__time" v-model="showTime">
                <option value="0" selected="selected">Show all</option>
                <option value="1">Last hour</option>
                <option value="8">Last 8 hours</option>
                <option value="24">Last 24 hours</option>
            </select>
            <select class="c-notebook__controls__time" v-model="sortEntries">
                <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
                <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
            </select>
        </div>
    </div>
    <div class="c-notebook__drag-area icon-plus"
         @click="newEntry($event)"
         @drop="newEntry($event)">
        <span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
    </div>
    <div class="c-notebook__entries">
        <ul>
            <notebook-entry
                v-for="(entry,index) in filteredAndSortedEntries"
                :key="entry.key"
                :entry="entry">
            </notebook-entry>
        </ul>
    </div>
</div>