<div class="messages mb-2"> <ul class="list-unstyled mb-0"> <li class="message alert" :class="`alert-${type(message)}`" v-for="message in messages"> <ui-icon :icon="`message-${message.type}`" fixed-width/> {{ message.message }} <div class="message__info"> <small class="message__date"> Komunikat ważny od {{ message.validFrom.format('HH:mm') }} do {{ message.validTo.format('HH:mm') }} </small> </div> </li> </ul> <template v-if="nonDisplayedCount > 0"> <div class="flex"> <button class="btn btn-action btn-sm flex-space-left" @click="showAll = !showAll"> <template v-if="showAll"> <ui-icon icon="chevron-up"/> {{ nonDisplayedCount }} mniej </template> <template v-else> <ui-icon icon="chevron-down"/> {{ nonDisplayedCount }} więcej </template> </button> </div> </template> </div>