<?php

declare(strict_types=1);

use Fisharebest\Webtrees\I18N;
use Fisharebest\Webtrees\Individual;
use Fisharebest\Webtrees\Tree;
use Fisharebest\Webtrees\View;

/**
 * @var string               $ajax_url
 * @var int                  $ancestors
 * @var array<string,string> $ancestors_options
 * @var bool                 $ancestors_only
 * @var Individual|null      $individual1
 * @var Individual|null      $individual2
 * @var int                  $max_recursion
 * @var int                  $recursion
 * @var array<string,string> $recursion_options
 * @var string               $title
 * @var Tree                 $tree
 */

?>

<h2 class="wt-page-title">
    <?= $title ?>
</h2>

<form method="post" class="wt-page-options wt-page-options-relationships-chart d-print-none">
    <div class="row">
        <label class="col-sm-3 col-form-label wt-page-options-label" for="xref">
            <?= I18N::translate('Individual 1') ?>
        </label>
        <div class="col-sm-9 wt-page-options-value">
            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual1, 'tree' => $tree, 'required' => true]) ?>
        </div>
    </div>

    <div class="row">
        <label class="col-sm-3 col-form-label wt-page-options-label" for="xref2">
            <?= I18N::translate('Individual 2') ?>
        </label>
        <div class="col-sm-9 wt-page-options-value">
            <?= view('components/select-individual', ['name' => 'xref2', 'individual' => $individual2, 'tree' => $tree, 'required' => true]) ?>
        </div>
    </div>

    <fieldset class="row mb-3">
        <legend class="col-form-label col-sm-3 wt-page-options-label">
        </legend>
        <div class="col-sm-9 wt-page-options-value">
            <?php if ($ancestors_only) : ?>
                <input type="hidden" name="ancestors" value="1">
                <?= I18N::translate('Find relationships via ancestors') ?>
            <?php else : ?>
                <?= view('components/radios', ['name' => 'ancestors', 'options' => $ancestors_options, 'selected' => $ancestors]) ?>
            <?php endif ?>
        </div>
    </fieldset>

    <fieldset class="row mb-3">
        <legend class="col-form-label col-sm-3 wt-page-options-label">
        </legend>
        <div class="col-sm-9 wt-page-options-value">
            <?php if ($max_recursion === 0) : ?>
                <?= I18N::translate('Find the closest relationships') ?>
                <input type="hidden" name="recursion" value="0">
            <?php else : ?>
                <?= view('components/radios', ['name' => 'recursion', 'options' => $recursion_options, 'selected' => $recursion]) ?>
            <?php endif ?>
        </div>
    </fieldset>

    <div class="row mb-3">
        <div class="col-form-label col-sm-3 wt-page-options-label"></div>
        <div class="col-sm-9 wt-page-options-value">
            <button class="btn btn-primary" type="submit">
                <?= /* I18N: A button label. */ I18N::translate('view') ?>
            </button>

            <button class="btn btn-link" id="btn-swap-individuals" type="button">
                <?= /* I18N: Reverse the order of two individuals */
                I18N::translate('Swap individuals') ?>
            </button>
        </div>
    </div>

    <?= csrf_field() ?>
</form>

<?php if ($individual1 !== null && $individual2 !== null) : ?>
    <div class="wt-page-content wt-chart wt-chart-relationships" data-wt-ajax-url="<?= e($ajax_url) ?>">
        <?= view('icons/spinner') ?>
    </div>
<?php endif ?>

<?php View::push('javascript') ?>
<script>
  $('#btn-swap-individuals').click(function () {
      // Swap the name attributes
      document.getElementById("xref").name = "xref2";
      document.getElementById("xref2").name = "xref";
      document.querySelector(".wt-page-options-relationships-chart").submit();
  });
</script>
<?php View::endpush() ?>
