{% extends "core/base.jinja" %}
{% set depth_min=0 %}
{% set depth_max=10 %}

{%- block additional_css -%}
  <link rel="stylesheet" href="{{ static('user/user_godfathers.scss') }}">
{%- endblock -%}

{% block additional_js %}
  <script type="module" src="{{ static("bundled/user/family-graph-index.ts") }}"></script>
{% endblock %}

{% block title %}
  {% trans user_name=profile.get_display_name() %}{{ user_name }}'s family tree{% endtrans %}
{% endblock %}

{% block content %}
  <div
    x-data="graph({
            activeUser: {{ object.id }},
            depthMin: {{ depth_min }},
            depthMax: {{ depth_max }},
            })"
    :aria-busy="loading"
  >
    <div class="graph-toolbar">
      <div class="toolbar-column">
        <div class="toolbar-input">
          <label for="godfather-depth-input">
            {% trans min=depth_min, max=depth_max %}Max godfather depth between {{ min }} and {{ max }}{% endtrans %}
          </label>
          <span class="depth-choice">
            <button
              @click="godfathersDepth--"
              :disabled="godfathersDepth <= {{ depth_min }}"
            ><i class="fa fa-minus"></i></button>
            <input
              x-model="godfathersDepth"
              x-ref="godfather_depth_input"
              type="number"
              name="godfathersDepth"
              id="godfather-depth-input"
              min="{{ depth_min }}"
              max="{{ depth_max }}"
            />
            <button
              @click="godfathersDepth++"
              :disabled="godfathersDepth >= {{ depth_max }}"
            ><i class="fa fa-plus"
              ></i></button>
          </span>
        </div>

        <div class="toolbar-input">
          <label for="godchild-depth-input">
            {% trans min=depth_min, max=depth_max %}Max godchildren depth between {{ min }} and {{ max }}{% endtrans %}
          </label>
          <span class="depth-choice">
            <button
              @click="godchildrenDepth--"
              :disabled="godchildrenDepth <= {{ depth_min }}"
            ><i
              class="fa fa-minus"
            ></i></button>
            <input
              x-model="godchildrenDepth"
              type="number"
              name="godchildrenDepth"
              id="godchild-depth-input"
              min="{{ depth_min }}"
              max="{{ depth_max }}"
            />
            <button
              @click="godchildrenDepth++"
              :disabled="godchildrenDepth >= {{ depth_max }}"
            ><i class="fa fa-plus"
              ></i></button>
          </span>
        </div>
      </div>

      <div class="toolbar-column">
        <div class="toolbar-input">
          <label for="reverse-checkbox">{% trans %}Reverse{% endtrans %}</label>
          <input x-model="reverse" type="checkbox" name="reverse" id="reverse-checkbox">
        </div>
        <button class="btn btn-grey" @click="reset">
          {% trans %}Reset{% endtrans %}
        </button>
        <button class="btn btn-grey" @click="screenshot">
          <i class="fa fa-camera"></i>
          {% trans %}Save{% endtrans %}
        </button>
      </div>
    </div>

    <div class="zoom-control" x-ref="zoomControl">
      <button
        @click="graph.zoom(graph.zoom() + 1)"
        :disabled="!isZoomEnabled"
      >
        <i class="fa-solid fa-magnifying-glass-plus"></i>
      </button>
      <button
        @click="graph.zoom(graph.zoom() - 1)"
        :disabled="!isZoomEnabled"
      >
        <i class="fa-solid fa-magnifying-glass-minus"></i>
      </button>
      <button
        x-show="isZoomEnabled"
        @click="isZoomEnabled = false"
      >
        <i class="fa-solid fa-unlock"></i>
      </button>
      <button
        x-show="!isZoomEnabled"
        @click="isZoomEnabled = true"
      >
        <i class="fa-solid fa-lock"></i>
      </button>
    </div>

    <div x-ref="graph" class="graph"></div>
  </div>

{% endblock %}

