<!--
Tooltips can be used in two ways:

1) Within a flex container
This also enables responsiveness of the width for the tooltip text. Ideally, put the tooltips on the same DOM level as the div / element the tooltip is intended for.

{# - Usage -
    <div class="search-container">
        <div style="flex-grow: 0.2">
            <input class="search" type="text" placeholder="Search..."></input>
        </div>
        <div id="tooltip-container" class="tooltip-little-grow tooltip-width">
            <tool-tip>
                <h4 slot="title">{{ _('Search options') }}</h4>
                <span slot="paragraph">
                    {{ _("You can search using addresses, tx-IDs, labels, confirmations or amounts.") }}<br><br>
                    {{ _('Search like this in the time field:') }} <code>%d.%m.%Y %H:%M</code><br><br>
                    {{ _('Search like this for amounts:') }} <br>
                    <code> 1</code> {{ _("for anything more than 1") }}<br>
                    <code>< 1</code> {{ _("for less than 1 BTC (don't forget the space)") }}<br>
                </span>
            </tool-tip>
        </div>
    </div>
#}

Repsonsiveness can be hooked up in the target jinja file etc. via eventListeners since the
the web component dispatches custom mouseover and mouseout events that can be listened for.
Like so:

this.tooltip.addEventListener("customhover", () => {
    ...
})
this.tooltip.addEventListener("customout", () => {
    ...
})

If you don't care about responsiveness, just use the tooltips as below, you can set a width via the width attribute.

{#
    <div style="display: flex;">
        <span>{{ _("Load Specter backup") }}:</span>
        <tool-tip>
            <span slot="paragraph">
                {{ _("Please make sure to unzip the backup file first, then upload the extracted folder.") }}
                {{ _("This will restore your wallets and devices.") }}<br>
                {{ _("Loading devices or wallets with names identical to existing ones may overwrite the existing ones.") }}        
            </span>
        </tool-tip>
    </div>
#}

2) Within other div such as buttons
You can use the move-right attribute, to move the tooltip to the right if necessary.

{# - Usage -
<button type="button" class="btn freeze-tx-btn">
    Un/Freeze UTXOs
    <tool-tip width="250px" move-right="true">
        <h4 slot="title">{{ _('Freezing UTXO') }}</h4>
        <span slot="paragraph">
            {{ _("Freezing a UTXO will make Specter disallow spending it.") }}<br><br>
            {{ _("This is useful especially for dealing with a dust attack, where you don't want to accidentally spend the dust received.") }}
        </span>
    </tool-tip>
</button>
#}
-->

<template id="tooltip-template-id">
    <style>
        .tooltip {
            display: flex;
            align-items: center;
            margin-left: 0.5em;
            position: relative;
        }
        .tooltip__icon {
            background: none;
            cursor: pointer;
            width: 1.3em;
        }
        .tooltip__box {
            display: none;
            position: absolute;
            left: 30px;
            top: -20px;
            background: var(--cmap-bg-lightest);
            border: 1.5px solid var(--default-color);
            border-radius: 10px;
            padding: 10px;
            z-index: 4;
        }
        /* This makes the arrow */
        .tooltip__box:before {
            content: "";
            position: absolute;
            left: -10px;
            top: 20px;
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent var(--default-color);
        }
        .title {
            text-align: start;
            font-size: 14px;
            font-weight: bold;
            line-height: 1.1;
            color: white;
        }
        .paragraph {
            display: block;
            text-align: start;
            font-size: 13px;
            font-weight: 300;
            line-height: 1.3;
            color: white;
        }
        .tooltip:hover .tooltip__box {
            display: flex;
            flex-direction: column;
        }
        @media (hover: none) {
            .tooltip {
                display: none;
            }
        }
    </style>

    <div class="tooltip">
        <img class="tooltip__icon" src="{{ url_for('static', filename='img/light-bulb.svg') }}" id="tooltip-img"></img>
        <div class="tooltip__box" id="tooltip-box">
            <slot name="title" class="title"></slot>
            <slot name="paragraph" class="paragraph"></slot>
        </div>
    </div>
</template>
  
<script type="module">
    class TooltipElement extends HTMLElement {
        constructor() {
            super();
            var shadowRoot = this.attachShadow({mode: 'open'});
            var template = document.getElementById('tooltip-template-id');
            var clone = template.content.cloneNode(true);
            this.tooltipImg = clone.getElementById('tooltip-img');
            this.tooltipDiv = clone.querySelector('.tooltip');
            // CustomEvent that can be picked up to adjust flex properties in the parent
            this.tooltipDiv.addEventListener("mouseover", () => {
                let event = new CustomEvent('customhover');
                this.dispatchEvent(event);
            })
            this.tooltipDiv.addEventListener("mouseout", () => {
                let event = new CustomEvent('customout');
                this.dispatchEvent(event);
            })
            this.tooltipBox = clone.getElementById("tooltip-box");
            shadowRoot.appendChild(clone);
        }

        static get observedAttributes() {
            return ['width', 'move'];
        }

        connectedCallback() {
            if (this.getAttribute("width")) {
                this.tooltipBox.style.width = this.getAttribute("width");
            }
            if (this.getAttribute("move-right")) {
                this.tooltipBox.style.left = "60px";
            }
            if (this.getAttribute("image")) {
                if (this.getAttribute("image") == "note") {
                    this.tooltipImg.src = "{{ url_for('static', filename='img/note.svg') }}";
                    this.tooltipImg.style.width = "1.5em";
                }
            }
        }
    }
customElements.define('tool-tip', TooltipElement);
</script>