{% macro chip_list_style() %}
    .tag {
        display: inline-block;
        background-color: #e0e0e0;
        border-radius: 4px;
        padding: 4px 8px;
        margin-right: 8px;
        margin-bottom: 8px;
    }
    .close-button {
        cursor: pointer;
    }
{% endmacro %}

{% macro chip_list(chip_list_name, header) %}
    <table style="width: 98%; margin: 0 1%;">
        <tr>
            <td class="key" style="width: 8%;">{{ header }}:</td>
            <td style="width: 90%;">
                <div id="{{ chip_list_name }}">
                <!-- MORE TAGS WILL BE ADDED HERE -->
                </div>
            </td>
        </tr>
    </table>
{% endmacro %}

{% macro add_to_chip_list() %}
    function addTag(chip_list_name, tag_name) {
        var tagList = document.getElementById(chip_list_name);

        var newTag = document.createElement('div');
        newTag.className = 'tag';
        newTag.textContent = tag_name;

        var closeButton = document.createElement('span');
        closeButton.closeName = 'close-button';
        closeButton.textContent = '⊗';

        closeButton.onclick = function() {
            tagList.removeChild(newTag);
        }

        newTag.appendChild(closeButton);
        tagList.appendChild(newTag);
    }
{% endmacro %}

{% macro checkboxes(checkbox_list, checkbox_id, header) %}
        <tr id="{{ checkbox_id }}">
            <td class="key">{{ header }}:</td>
            {% for checkbox in checkbox_list %}
            <td class="check_option">
            <label id="label_{{ checkbox[0] }}">
                <input type="checkbox" name="{{ checkbox[0] }}", value="{{ checkbox[0] }}" checked>{{ checkbox[1] }}
            </label>
            </td>
            {%- endfor %}
        </tr>
{% endmacro %}

{% macro checkbox_handler() %}
    function isChecked(checkbox_name) {
        var checkbox = document.querySelector('input[name="' + checkbox_name + '"]');
        if (checkbox) {
            return checkbox.checked;
        }
        return false;
    }
{%- endmacro %}

{% macro radios(radio_list, radio_id, choice_id, header) %}
        <tr {{ radio_id }}>
            <td class="key">{{ header }}:</td>
            {% for radio in radio_list %}
                <td>
                <label>
                    <input type="radio" name="{{ choice_id }}" value="{{ radio[0] }}" {% if loop.index0 == 0 %}checked{% endif %}>
                    {{ radio[1] }}
                </label>
                </td>
            {%- endfor %}
        </tr>
{%- endmacro %}

{% macro get_radio_handler(handler_name, radio_id) %}
    function {{ handler_name }}() {
        var selectedValue = document.querySelector('input[name="{{ radio_id }}"]:checked').value;
        return selectedValue;
    }
{%- endmacro %}

{% macro range_picker_style() %}
    <!-- courtesy of:  https://medium.com/@predragdavidovic10/native-dual-range-slider-html-css-javascript-91e778134816 -->
.range_container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 35% auto;
}

.sliders_control {
  position: relative;
  min-height: 15px;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type=range]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="number"] {
  color: #8a8383;
  height: 30px;
  font-size: 12px;
  border: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
}
{% endmacro %}

{% macro range_picker() %}
<div class="range_container">
    <div class="sliders_control">
        <input id="fromSlider" type="range" value="10" min="0" max="100"/>
        <input id="toSlider" type="range" value="40" min="0" max="100"/>
    </div>
    <div class="form_control">
        <div class="form_control_container">
            Min: <label id="fromInput"/>
        </div>
        <div class="form_control_container">
            Max: <label id="toInput"/>
        </div>
    </div>
</div>
{%- endmacro %}

{% macro range_handlers() %}
function formatSize(size, baseUnit = "") {
    if (typeof size !== "number") {
        size = Number(size);
    }
    let space = baseUnit !== "" ? " " : "";
    let units = ["", "k", "M", "G", "T"];
    for (let unit of units) {
        if (Math.abs(size) < 1000.0) {
            if (unit === "") {
                return `${size.toFixed(2)}${space}${baseUnit}`;
            }
            return `${size.toFixed(2)}${space}${unit}${baseUnit}`;
        }
        size /= 1000.0;
    }
    return `${size.toFixed(2)} P${baseUnit}`;
}

function findNearestStep(value, steps) {
    return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
}

function controlFromSlider(fromSlider, toSlider, fromInput) {
  const [from, to] = getParsed(fromSlider, toSlider);
  fillSlider(fromSlider, toSlider, '#C6C6C6', '#25daa5', toSlider);
  if (from > to) {
    fromSlider.value = to;
    setInput(fromInput, to);
  } else {
    setInput(fromInput, from);
    fromSlider.value = from;
    fromInput.value = from;
  }
}

function controlToSlider(fromSlider, toSlider, toInput) {
  const [from, to] = getParsed(fromSlider, toSlider);
  fillSlider(fromSlider, toSlider, '#C6C6C6', '#25daa5', toSlider);
  setToggleAccessible(toSlider);
  if (from <= to) {
    toSlider.value = to;
    setInput(toInput, to);
  } else {
    toSlider.value = from;
    setInput(toInput, from);
  }
}

function getParsed(currentFrom, currentTo) {
  var from = parseInt(currentFrom.value, 10);
  var to = parseInt(currentTo.value, 10);
  from = findNearestStep(from, steps);
  to = findNearestStep(to, steps);
  return [from, to];
}

function fillSlider(from, to, sliderColor, rangeColor, controlSlider) {
    const [fromValue, toValue] = getParsed(from, to);
    const rangeDistance = to.max - to.min;
    const fromPosition = fromValue - to.min;
    const toPosition = toValue - to.min;
    controlSlider.style.background = `linear-gradient(
      to right,
      ${sliderColor} 0%,
      ${sliderColor} ${(fromPosition)/(rangeDistance)*100}%,
      ${rangeColor} ${((fromPosition)/(rangeDistance))*100}%,
      ${rangeColor} ${(toPosition)/(rangeDistance)*100}%,
      ${sliderColor} ${(toPosition)/(rangeDistance)*100}%,
      ${sliderColor} 100%)`;
}

function setToggleAccessible(currentTarget) {
  const toSlider = document.querySelector('#toSlider');
  if (Number(currentTarget.value) <= 0 ) {
    toSlider.style.zIndex = 2;
  } else {
    toSlider.style.zIndex = 0;
  }
}

const fromSlider = document.querySelector('#fromSlider');
const toSlider = document.querySelector('#toSlider');
const fromInput = document.querySelector('#fromInput');
const toInput = document.querySelector('#toInput');
fillSlider(fromSlider, toSlider, '#C6C6C6', '#25daa5', toSlider);
setToggleAccessible(toSlider);

fromSlider.oninput = () => controlFromSlider(fromSlider, toSlider, fromInput);
toSlider.oninput = () => controlToSlider(fromSlider, toSlider, toInput);
{%- endmacro %}

{% macro tooltip_style() %}
.tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    width: 200px;
    font-size: 12px;
    background-color: #ccc;
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
}

.tooltip-text::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
    background-color: #ccc;
    padding: 5px;
    z-index: 1;
}

.hover-text:hover .tooltip-text {
    visibility: visible;
}
.tright {
    top: -8px;
    left: 120%;
}

.tright::before {
    top: 35%;
    left: -2%;
}

.hover-text {
    position: relative;
    display: inline-block;
    margin: 4px;
    padding-left: 2px;
    text-align: center;
}
{%- endmacro %}

{%- macro tooltip(tooltip_text) %}<div class="hover-text">[?]<!-- Tooltip text --><span class="tooltip-text tright">{{ tooltip_text }}</span></div>{%- endmacro %}

{%  macro help(function_name, element_name, tips) %}
<table class="help" id="{{ element_name }}">
    <thead>
    <tr>
        <th onclick="{{ function_name }}()" colspan="2">
            <span id="{{ element_name }}-plus-left" style="float: left; display: none">[+]</span>
            <span id="{{ element_name }}-minus-left" style="float: left">[-]</span>
            Help / Tips
            <span id="{{ element_name }}-minus-right" style="float: right">[-]</span>
            <span id="{{ element_name }}-plus-right" style="float: right; display: none">[+]</span>
        </th>
    </tr>
    </thead>
    <tbody>
    {%- for tip in tips %}
        <tr><td style="font-weight: bold; padding-right: 1em;">Tip {{ loop.index }}</td> <td>{{ tip }}</td></tr> 
    {%- endfor %}
    </tbody>
</table>
{%- endmacro %}

{% macro toggle_help(function_name, element_name) %}
function {{ function_name }}() {
    var tableBody = document.getElementById("{{ element_name }}").getElementsByTagName("tbody")[0];
    var plus_l = document.getElementById("{{ element_name }}-plus-left");
    var minus_l= document.getElementById("{{ element_name }}-minus-left");
    var plus_r = document.getElementById("{{ element_name }}-plus-right");
    var minus_r = document.getElementById("{{ element_name }}-minus-right");

    if (tableBody.style.visibility === "collapse") {
        tableBody.style.visibility = "visible";
        minus_l.style.display = "block";
        minus_r.style.display = "block";
        plus_l.style.display = "none";
        plus_r.style.display = "none";
    } else {
        tableBody.style.visibility = "collapse";
        minus_l.style.display = "none";
        minus_r.style.display = "none";
        plus_l.style.display = "block";
        plus_r.style.display = "block";
    }
}
{%- endmacro %}