{% extends "kin/base.html" %}
{% load kin_extras %}
{% block title %}{{ kind|title }} of {{ p.name }}{% endblock %}
{% block content %}
<div class="row no-print"><h1>{{ kinds|get_item:kind }} of <a href="{{ p.get_absolute_url }}">{{ p.name }}</a></h1></div>
<form class="toolbar no-print" method="get">
  {% for k, label in kinds.items %}<a class="btn {% if k != kind %}ghost{% endif %}" href="{% url 'kin:tree' p.pk k %}?gens={{ gens }}">{{ label }}</a>{% endfor %}
  <label>Generations <select name="gens" onchange="this.form.submit()">{% for n in gen_range %}<option value="{{ n }}"{% if n == gens %} selected{% endif %}>{{ n }}</option>{% endfor %}</select></label>
  <button type="button" class="btn ghost" data-zoom="in">+</button><button type="button" class="btn ghost" data-zoom="out">−</button><button type="button" class="btn ghost" data-zoom="reset">Fit</button>
  <a class="btn ghost" href="?gens={{ gens }}&format=svg">Download SVG</a>
  <button type="button" class="btn ghost" onclick="window.print()">Print / PDF</button>
</form>
<div class="treebox" id="treebox">{{ svg|safe }}</div>
<p class="muted no-print">Scroll to zoom, drag to pan. Dashed boxes mark people who already appear elsewhere in the chart (pedigree collapse).</p>
{% endblock %}