<!DOCTYPE html>
<html lang="%lang;">
<head>
  <!-- $Id: relmenu.txt v7.1 10/01/2023 20:01:49 $ -->
  <!-- Copyright (c) 1998-2007 INRIA -->
  <title>[*link between]%sp;
    %if;(public_name != "")%public_name;
    %else;%first_name; %surname;%end; [and]0…%nn;
  </title>
  <meta name="robots" content="none">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="%image_prefix;/favicon_gwd.png">
  %include;favicon
  %include;css
</head>
%define;nth_cousins(xx)
  %let;xx;xx-1;%in;
  [*%s cousins:::xx]%nn;
%end;
%define;relative_sosa(sosa_link)
  [<em>Sosa number</em> relative to %t:::sosa_link]
%end;
<body%body_prop; onload="main()">
%include;hed
<div class="container">
%message_to_wizard;
%include;perso_header

<h1 class="text-center mt-2">[*link between]%sp;
  %if;(public_name != "")%public_name;%else;%first_name;%end;
  %if;(qualifier != "") <em>%qualifier;</em>%end;
  %sp;%surname;
  %if;(alias != "") <em>(%alias;)</em>%end;
  %sp;[and]0...%nn;
</h1>

<form name="relationship" method="submit" action="%action;">
  <div class="row">
    <div id="rel_form_shortcut" class="col-4">
      <input type="hidden" name="em" value="R">
      %if;access_by_key;
        <input type="hidden" name="ep" value="%first_name_key_val;">
        <input type="hidden" name="en" value="%surname_key_val;">
        %if;(occ != "0")
          <input type="hidden" name="eoc" value="%occ;">
        %end;
      %else
        <input type="hidden" name="ei" value="%index;">
      %end;
      <input type="hidden" name="m" value="NG">
      <span>[*relationship shortcut]</span>
      <div class="mt-1 ml-2">
        %if;(browsing_with_sosa_ref and self.index!=sosa_ref.index)
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sel_sosa" name="select" value="%sosa_ref.index;" onclick="main()">
            <label class="custom-control-label" for="sel_sosa"><i class="far fa-dot-circle text-success mr-1"></i><b>%sosa_ref;</b> ([Sosa] 1)</label>
          </div>
        %end;
        %foreach;family;
          %if;(spouse!="? ?")
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="sel_spouse_%spouse.index;" name="select" value="%spouse.index;" onclick="main()">
              <label class="custom-control-label" for="sel_spouse_%spouse.index;">%spouse;%if;spouse.has_nobility_titles;,%sp;
                <em>%spouse.nobility_title;</em>%end; ([spouse/spouses]0)</label>
            </div>
          %end;
        %end;
        %foreach;relation;
          %if;has_relation_him;
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="sel_rel_him_%relation_him.index;" name="select" value="%relation_him.index;" onclick="main()">
              <label class="custom-control-label" for="sel_rel_him_%relation_him.index;">%relation_him;%if;relation_him.has_nobility_titles;,%sp;
                <em>%relation_him.nobility_title;</em>%end; (%relation_him.type;)</label>
            </div>
          %end;
          %if;has_relation_her;
            <div class="custom-control custom-radio">
              <input type="radio" class="custom-control-input" id="sel_rel_her_%relation_her.index;" name="select" value="%relation_her.index;" onclick="main()">
              <label class="custom-control-label" for="sel_rel_her_%relation_her.index;">%relation_her;%if;relation_her.has_nobility_titles;,%sp;
                <em>%relation_her.nobility_title;</em>%end; (%relation_her.type;)</label>
            </div>
          %end;
        %end;
        %foreach;related;
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sel_related_%related.index;" name="select" value="%related.index;" onclick="main()">
            <label class="custom-control-label" for="sel_related_%related.index;">%related;%if;related.has_nobility_titles;,%sp;
              <em>%related.nobility_title;</em>%end; (%related.type;)</label>
          </div>
        %end;
        %foreach;event_witness_relation;
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="sel_witness_%event_witness_relation.person.index;" name="select" value="%event_witness_relation.person.index;" onclick="main()">
            <label class="custom-control-label" for="sel_witness_%event_witness_relation.person.index;">%event_witness_relation.person; ([witness/witnesses]0)</label>
          </div>
        %end;
      </div>
    </div>
    <div class="col-4">
      %hidden;
      <div id="rel_form_search" onclick="document.getElementById('radio_R').checked = 'checked'; main();">
        <input type="hidden" name="em" value="R"%/>
        %if;access_by_key;
          <input type="hidden" name="ep" value="%first_name_key_val;"%/>
          <input type="hidden" name="en" value="%surname_key_val;"%/>
          %if;(occ != "0")
            <input type="hidden" name="eoc" value="%occ;"%/>
          %end;
        %else
          <input type="hidden" name="ei" value="%index;"%/>
        %end;
        <input type="hidden" name="m" value="NG"%/>
        <div class="custom-control custom-radio">
          <input type="radio" class="custom-control-input" id="radio_R" name="select" value="input" onclick="main()" checked>
          <label class="custom-control-label" for="radio_R">[*search/case sensitive]0 [any individual in the base][:]</label>
        </div>
        <div>
          <label class="sr-only" for="n">[*public name], [alias]%if;browsing_with_sosa_ref;, [n° Sosa relative to]%end;…</label>
          <input type="search" id="n" class="form-control mt-1" name="n" placeholder="[*public name], [alias]%if;browsing_with_sosa_ref;, [n° Sosa relative to]%end;…" autofocus>
          <label class="sr-only" for="firstname">[*first name/first names]0</label>
          <input type="search" id="firstname" class="form-control" name="fn" placeholder="[*first name/first names]0">
          <label class="sr-only" for="surname">[*surname/surnames]0</label>
          <input type="search" id="surname" class="form-control" name="sn" placeholder="[*surname/surnames]0">
        </div>
      </div>
      <div class="text-center my-4">
        <button type="submit" class="btn btn-outline-primary btn-lg">[*validate/delete]0</button>
      </div>
    </div>
    <div class="col-4 flex-column">
      <div>
        <span>[*relationship computing mode][:]</span>
        <div class="ml-2 mt-1">
          <div class="custom-control custom-radio" id="rel_shortest_path">
            <input type="radio" class="custom-control-input" id="etS" name="et" value="S" checked>
            <label class="custom-control-label" for="etS">[*shortest path]</label>
          </div>
          <div class="custom-control custom-radio" id="rel_ancestors">
            <input type="radio" class="custom-control-input" id="etA" name="et" value="A">
            <label class="custom-control-label" for="etA">[*relationship by ancestors]</label>
          </div>
          <div class="custom-control custom-radio" id="rel_by_marriage">
            <input type="radio" class="custom-control-input" id="etM" name="et" value="M">
            <label class="custom-control-label" for="etM">[*relationship by marriage]</label>
          </div>
        </div>
      </div>
      <div class="mt-2">
        <span>[*relationship display options]</span>
          <div class="ml-2 mt-1">
            <div class="custom-control custom-checkbox">
              <input type=checkbox class="custom-control-input" id="long" name="long">
              <label class="custom-control-label" for="long">[*long display]</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type=checkbox class="custom-control-input" id="spouse" name="spouse">
              <label class="custom-control-label" for="spouse">[*display spouse]</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="image" name="image" value="off">
              <label class="custom-control-label" for="image">[*visualize/show/hide/summary]2 [image/images]1 <span class="text-info">✘</span></label>
            </div>
          </div>
          %(
          <div class="form-group row ml-2 mt-3">
            <label class="col-form-label ml-4" for="bd">[*border][:]</label>
            <div class="input-group col-6">
              <input type="number" class="form-control" id="bd" name="bd" min="0" max="15" placeholder="0">
              <div class="input-group-append">
                <div class="input-group-text">px</div>
              </div>
            </div>
          </div>
          <fieldset class="form-group ml-2 mt-2">
            <legend class="col-form-label ml-4 pt-0">[*color][:]</legend>
            <div class="flex-row align-item-center">
              <div class="form-check form-check-inline mx-0 px-1">
                <input class="form-check-input" type="radio" id="color" name="color" value="" checked>
                <label class="form-check-label" for="color">0</label>
              </div>
              <div class="form-check form-check-inline mx-0 px-1 bg1">
                <input class="form-check-input" type="radio" id="color1" name="color" value="bg1">
                <label class="form-check-label" for="color1">1</label>
              </div>
              <div class="form-check form-check-inline bg2 mx-0 px-1">
                <input class="form-check-input" type="radio" id="color2" name="color" value="bg2">
                <label class="form-check-label" for="color2">2</label>
              </div>
              <div class="form-check form-check-inline bg3 mx-0 px-1">
                <input class="form-check-input" type="radio" id="color3" name="color" value="bg3">
                <label class="form-check-label" for="color3">3</label>
              </div>
              <div class="form-check form-check-inline bg4 mx-0 px-1">
                <input class="form-check-input" type="radio" id="color4" name="color" value="bg4">
                <label class="form-check-label" for="color4">4</label>
              </div>
              <div class="form-check form-check-inline bg5 mx-0 px-1">
                <input class="form-check-input" type="radio" id="color5" name="color" value="bg5">
                <label class="form-check-label" for="color5">5</label>
              </div>
              <div class="form-check form-check-inline bg6 mx-0 px-1">
                <input class="form-check-input" type="radio" id="color6" name="color" value="bg6">
                <label class="form-check-label" for="color6">6</label>
              </div>
            </div>
          </fieldset>
          %)
        </div>
      </div>
    </div>
  </div>
</form>
%base_trailer;
%include;copyr
</div>
<script>
<!--
  function enable(id) {
    var inputs = document.getElementById(id).getElementsByTagName('input');
    for (i=0; i<inputs.length; i++) {
      inputs[i].disabled = '';
    }
  }

  function disable(id) {
    var inputs = document.getElementById(id).getElementsByTagName('input');
    for (i=0; i<inputs.length; i++) {
      if (inputs[i].name != "select") {
        inputs[i].disabled = 'disabled';
      }
    }
  }

  function main() {
    %( recherche individu %)
    if (radio_R.checked == true) {
      disable("rel_form_shortcut");
      enable("rel_form_search");
    }
    else {
      disable("rel_form_search");
      enable("rel_form_shortcut");
    }
  }
-->
</script>
%include;js
</body>
</html>
