<!DOCTYPE html>
<html lang="%lang;">
<head>
  <!-- $Id: relmenu.txt,v 5.6 18/07/2017 04:54:22 ddr Exp $ -->
  <!-- Copyright (c) 1998-2017 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
  %include;hed
</head>
%define;nth_cousins(xx)
  [*%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()">
<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>
%define;ancestor_siblings(lll,ttt)
  %reset_count;
  %foreach;ancestor_level;
    %if;(level=lll)
      %foreach;ancestor;
        %if;(ancestor.has_siblings)%incr_count;%end;
      %end;
    %end;
  %end;
  %if;(count>0)
    <option id="uncleslll" value="lll">lll. [*ttt]</option>
  %end;
%end;
<form name="relationship" method="submit" action="%action;">
  <div class="row">
    <div class="col-9">
      <div class="row">
        <div class="col-5">
          <div id="rel_form_shortcut" class="form-group">
            <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="form-check">
                  <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="select" value="%sosa_ref.index;" onclick="main()"%/>
                    <i class="fa fa-dot-circle-o text-success"></i>%nn;
                    <b>%sosa_ref;</b> ([Sosa] 1)
                  </label>
                </div>
              %end;
              %foreach;family;
                %if;(spouse != "? ?")
                  <div class="form-check">
                    <label class="form-check-label">
                      <input type="radio" class="form-check-input" name="select" value="%spouse.index;" onclick="main()"%/>
                      %spouse;
                      %if;spouse.has_nobility_titles;,%sp;
                      <em>%spouse.nobility_title;</em>%end;%nl;
                      ([spouse/spouses]0)%nl;
                    </label>
                  </div>
                %end;
              %end;
              %foreach;relation;
                %if;has_relation_him;
                <div class="form-check">
                  <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="select" value="%relation_him.index;" onclick="main()"%/>
                    %relation_him;
                    %if;relation_him.has_nobility_titles;,%sp;
                    <em>%relation_him.nobility_title;</em>%end;%nl;
                    (%relation_him.type;)%nl;
                  </label>
                </div>
                %end;
                %if;has_relation_her;
                <div class="form-check">
                  <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="select" value="%relation_her.index;" onclick="main()"%/>
                    %relation_her;
                    %if;relation_her.has_nobility_titles;,%sp;
                    <em>%relation_her.nobility_title;</em>%end;%nl;
                    (%relation_her.type;)%nl;
                  </label>
                </div>
                %end;
              %end;
              %foreach;related;
              <div class="form-check">
                <label class="form-check-label">
                  <input type="radio" class="form-check-input" name="select" value="%related.index;" onclick="main()"%/>
                  %related;
                  %if;related.has_nobility_titles;,%sp;
                  <em>%related.nobility_title;</em>%end;%nl;
                  (%related.type;)%nl;
                </label>
              </div>
              %end;
              %foreach;event_witness_relation;
                <div class="form-check">
                  <label class="form-check-label">
                    <input type="radio" class="form-check-input" name="select" value="%event_witness_relation.person.index;" onclick="main()"%/>
                    %event_witness_relation.person;%nl;
                    ([witness/witnesses]0)%nl;
                  </label>
                </div>
              %end;
            </div>
          </div>
        </div>
        <div id="rel_search">
          <p>%hidden;</p>
          <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"%/>
            <label id="rel_search_title">
              <input type="radio" id="radio_R" name="select" value="input" checked onclick="main()"%/>
              [*search/case sensitive]0 [any individual in the base][:]<br>
            </label>
            <div id="rel_search_content">
                  <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" autofocus/>
                  <label class="sr-only" for="surname">[*surname/surnames]0</label>
                  <input type="search" id="surname" class="form-control" name="sn" placeholder="[*surname/surnames]0"/>
                  <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" name="n" placeholder="[*public name], [alias]%if;browsing_with_sosa_ref;, [n° Sosa relative to]%end;…"/>
            </div>
          </div>
          <div id="rel_form_cousin" onclick="document.getElementById('radio_C').checked = 'checked'; main();">
            <input type="hidden" name="m" value="C"%/>
            %if;access_by_key;
              <input type="hidden" name="p" value="%first_name_key_val;"%/>
              <input type="hidden" name="n" value="%surname_key_val;"%/>
              %if;(occ != "0")
                <input type="hidden" name="oc" value="%occ;"%/>
              %end;
            %else
              <input type="hidden" name="i" value="%index;"%/>
            %end;
            <label id="rel_cousin_title">
              <input type="radio" id="radio_C" name="select" onclick="main()" value=""%/>
              [*select] [close family][:]<br>
            </label>
            <div id="rel_cousin_content">
              <select id="sel_C" class="form-control" name="v1" onfocus="document.getElementById('radio_C').checked=true; main()" onchange="main()">
                %if;has_siblings;
                  <option id="siblings" value="1">1. [*siblings]</option>
                %end;
                %if;has_nephews_or_nieces;
                  <option id="nephew" value="1">     ↳  [*a nephew/a niece]4</option>
                  <option id="grnephew" value="1">          ↳  [*a great-nephew/a great-niece]4</option>
                %end;
                %if;(father.has_siblings or mother.has_siblings)
                  <option id="uncles" value="2">2. [*uncles and aunts]</option>
                %end;
                %foreach;cousin_level;
                  %if;(level=2)
                    <option value="2">     ↳  [*cousins]</option>
                    %( <option id="childcous" value="2">     ↳  [*children of cousins]</option>%)
                  %end;
                %end;
                %apply;ancestor_siblings(3,"siblings of the grandparents")
                <option id="parcousins" value="3">      ↳  %apply;a_of_b%with;[*cousins]3%and;[the father/the mother/a parent]2%end;</option>
                %foreach;cousin_level;
                  %if;(level=3)
                    <option value="3">            ↳ [*2nd cousins]</option>
                  %end;
                %end;
                %apply;ancestor_siblings(4,"siblings of the great-grandparents")
                <option id="grparcousins" value="4">      ↳  %apply;a_of_b%with;[*cousins]3%and;[a grandfather/a grandmother/a grandparent]2%end;</option>
                <option id="parcousins2" value="4">            ↳  %apply;a_of_b%with;[*2nd cousins]3%and;[the father/the mother/a parent]2%end;</option>
                %foreach;cousin_level;
                  %if;(level=4)
                    <option value="4">                ↳ [*3rd cousins]</option>
                  %end;
                %end;
                <option class="text-uppercase" selected disabled>--</option>
                %foreach;cousin_level;
                  %if;(level>4)
                    <option value="%level;">%level;. %apply;nth_cousins%with;%apply;nth%with;zero/[nth (cousin)]%and;%level;%end;%end;</option>
                  %end;
                %end;
              </select>
              <input type="hidden" id="v2" name="v2" value=""/>
            </div>
          </div>
          <div class="text-center my-5">
            <button type="submit" class="btn btn-outline-secondary btn-lg">[*validate/delete]0</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col mt-3">
      <div class="row" id="rel_mode">
        <span class="font-weight-bold">[*relationship computing mode][:]</span>
        <div class="ml-2 mt-1">
          <div class="form-check" id="rel_ancestors">
            <label class="form-check-label"><input type="radio" class="form-check-input" name="et" value="A" checked%/>
            [*relationship by ancestors]</label>
          </div>
          <div class="form-check" id="rel_by_marriage">
            <label class="form-check-label"><input type="radio" class="form-check-input" name="et" value="M"%/>
            [*relationship by marriage]</label>
          </div>
          <div class="form-check" id="rel_shortest_path">
            <label class="form-check-label"><input type="radio" class="form-check-input" name="et" value="S"%/>
            [*shortest path]</label>
          </div>
        </div>
      </div>
      <div class="row">
        <span class="font-weight-bold">[*relationship display options]</span>
        <div class="ml-2 mt-1">
          <div class="form-check">
            <label class="form-check-label"><input type="checkbox" class="form-check-input" name="spouse" value="on"%/> [*display spouse]</label>
          </div>
          <div class="form-check">
            %( default value if "image" is undefined is "on" %)
            <input type="hidden" name="image" value="off">
            <label class="form-check-label"><input type="checkbox" class="form-check-input" name="image" value="on"%/> [*display picture]1</label>
          </div>
          <div class="form-check">
            <label class="form-check-label"><input type="checkbox" class="form-check-input" name="long" value="on"%/> [*long display]</label>
          </div>
          <div class="form-inline d-flex">
            <label class="col-form-label" for="bd">[*border][:]</label>
            <div class="input-group input-group-sm ml-2 mt-1 ">
              <input type="number" class="form-control form-control-sm" id="bd" name="bd" min="0" max="15" placeholder="0" value=""/>
              <div class="input-group-addon">px</div>
            </div>
          </div>
          <span>[*color][:]</span>
          <div class="form-check form-check-inline ml-1">
            <label class="form-check-label"><input type="radio" class="form-check-input mx-1" name="color" value="" checked%/>0</label>
            <label class="form-check-label bg1"><input type="radio" class="form-check-input mx-1" name="color" value="bg1"%/>1</label>
            <label class="form-check-label bg2"><input type="radio" class="form-check-input mx-1" name="color" value="bg2"%/>2</label>
            <label class="form-check-label bg3"><input type="radio" class="form-check-input mx-1" name="color" value="bg3"%/>3</label>
            <label class="form-check-label bg4"><input type="radio" class="form-check-input mx-1" name="color" value="bg4"%/>4</label>
            <label class="form-check-label bg5"><input type="radio" class="form-check-input mx-1" name="color" value="bg5"%/>5</label>
            <label class="form-check-label bg6"><input type="radio" class="form-check-input mx-1" name="color" value="bg6"%/>6</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
%include;trl
%include;copyr
</div>

<script>
<!--
  function enable(id) {
    var inputs = document.getElementById(id).getElementsByTagName('input');
    for (i=0; i<inputs.length; i++) {
      inputs[i].disabled = '';
    }
    if (id == "rel_form_cousin") {
      document.getElementById('sel_C').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';
      }
    }
    if (id == "rel_form_cousin") {
      document.getElementById('sel_C').disabled = 'disabled';
    }
  }

  function hide_mode() {
    var title = document.getElementById("rel_mode");
    var mode1 = document.getElementById("rel_ancestors");
    var mode2 = document.getElementById("rel_by_marriage");
    var mode3 = document.getElementById("rel_shortest_path");
    title.style.display = 'none';
    mode1.style.display = 'none';
    mode2.style.display = 'none';
    mode3.style.display = 'none';
  }

  function show_mode() {
    var title = document.getElementById("rel_mode");
    var mode1 = document.getElementById("rel_ancestors");
    var mode2 = document.getElementById("rel_by_marriage");
    var mode3 = document.getElementById("rel_shortest_path");
    title.style.display = 'block';
    mode1.style.display = 'block';
    mode2.style.display = 'block';
    mode3.style.display = 'block';
  }

  function main() {
    %( recherche individu %)
    if (radio_R.checked == true) {
      disable("rel_form_cousin");
      disable("rel_form_shortcut");
      enable("rel_form_search");
      enable("rel_mode");
      show_mode();
    }
    %( recherche d'un proche %)
    else if (radio_C.checked == true) {
      disable("rel_form_search");
      disable("rel_form_shortcut");
      disable("rel_mode");
      hide_mode();
      enable("rel_form_cousin");
      if (siblings!=null && siblings.selected == true ||
            uncles!=null && uncles.selected == true ||
           uncles3!=null && uncles3.selected == true ||
           uncles4!=null && uncles4.selected == true ||
           uncles5!=null && uncles5.selected == true ) {
          v2.value = "1";
      } else if ( nephew!=null && nephew.selected == true ||
                 parcousins!=null && parcousins.selected == true ||
               grparcousins.selected == true ) {
          v2.value = "2";
      } else if ( grnephew.selected == true ||
               parcousins2.selected == true ) {
          v2.value = "3";
      }
        else {
          v2.value = "";
      }
    }
    %( raccourcis %)
    else {
      disable("rel_form_search");
      disable("rel_form_cousin");
      enable("rel_form_shortcut");
      enable("rel_mode");
      show_mode();
    }
  }
-->
</script>
%include;js
</body>
</html>
