header.html

<!-- THE ERROR
Switching from `isServer()` to `isChannel()` (template line 30 and 17)

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

div.kiwi-header-options on line 31 fails to be removed.

-->
<template>
    <div
        class="kiwi-header"
        v-bind:class="{
            'kiwi-header--showall': buffer_settings_open,
        }"
    >

        <template v-if="isChannel()">
            <div class="kiwi-header-options" key="options-channel">
                <a
                    class="u-button u-button-secondary"
                    @click="buffer_settings_open=!buffer_settings_open"
                ><i class="fa fa-wrench" aria-hidden="true"></i></a>
            </div>
            <div class="kiwi-header-name">{{buffer.name}}</div>
            <div class="kiwi-header-topic" v-html="formatMessage(buffer.topic)"></div>
            <div v-if="buffer.getNetwork().state === 'connected' && !buffer.joined">
                <a @click="joinCurrentBuffer" class="u-link">Join Channel</a>
            </div>
        </template>
        <template v-else-if="isServer()">
            <div class="kiwi-header-options" key="options-server">
                <a
                    class="u-button u-button-secondary"
                    @click="showNetworkSettings(buffer.getNetwork())"
                ><i class="fa fa-wrench" aria-hidden="true"></i></a>
            </div>
            <div class="kiwi-header-name">{{buffer.getNetwork().name}}</div>

            <div v-if="buffer.getNetwork().state === 'disconnected'" class="kiwi-header-server-connection">
                Not connected.
                <a @click="buffer.getNetwork().ircClient.connect()" class="u-link">Connect</a>
            </div>
            <div v-else-if="buffer.getNetwork().state === 'connecting'" class="kiwi-header-server-connection">
                Connecting...
            </div>
        </template>
        <template v-else-if="isQuery()">
            <div class="kiwi-header-options" key="options-query">
                <a class="u-button u-button-secondary" @click="closeCurrentBuffer">Close</a>
            </div>
            <div class="kiwi-header-name">Private conversation with {{buffer.name}}</div>
        </template>

        <div
            v-if="buffer_settings_open"
            class="kiwi-header-buffersettings"
            @click.stop=""
        >
            <buffer-settings v-bind:buffer="buffer"></buffer-settings>
            <a @click="buffer_settings_open=false" class="u-button u-button-secondary kiwi-header-close-buffersettings">
                <i class="fa fa-caret-up" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</template>