[% WRAPPER header.tt
	pagetitle = "Stemmaweb - Relationship mapper"
	applicationjs = c.uri_for("/js/relationship.js")
	applicationstyle = c.uri_for('/css/relationship.css')
%]
<script type="text/javascript">
// Load the text ID and the base path
var basepath = "[% c.uri_for( '/relation/' ) %]";
var textid = "[% textid %]";
var can_morphologize = "[% can_morphologize %]";
var editable = "[% permission %]" === "full";
var text_direction = "[% direction %]";
// URLs for images referenced in Javascript
var merge_button_yes = "[% c.uri_for( '/images/tick_circle_frame.png' ) %]";
var merge_button_no = "[% c.uri_for( '/images/no_entry.png' ) %]";
// Constants used in Javascript that we get from the server
[% IF error -%]
var relationship_types = [];
var relationship_scopes = [];
var ternary_values = [];
[% ELSE -%]
var relationship_types = [% relationship_types %];
var relationship_scopes = [% relationship_scopes %];
var ternary_values = [% ternary_values %];
[% END -%]

$(document).ready(function () {
  loadSVG('[% svg_string %]');
});
</script>
[% END %]

  <div class="mainnav">
	<span>[% IF c.user_exists %]Hello [% c.user.get_object.email %]! &nbsp; <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% END %]<a href="help/[% text_lang %]" title="Relationship mapper help" class="helptag navlink">Help / About</a> | <a href="[% c.uri_for( '/' ) %]?withtradition=[% textid %]" class="navlink">Return to index</a> </span>
   </div>
    <div id="topbanner">
		<h1>Relationship mapper</h1>
		<h2>[% text_title %]</h2>
		<div id="segmentation">
[% FOREACH segment IN textsegments -%]
[% IF segment.start != startseg -%]
			<a href="[% c.uri_for( "/relation/$textid" ) %]?start=[% segment.start %]">
				<span class="segment_guide">[% segment.display %]</span>
			</a>
[% ELSE -%]
			<span class="segment_guide selected">[% segment.display %]</span>
[% END -%]
[% END -%]
		</div>
	</div>

	<div id="enlargement_container" class="fillPage">	
		<div id="loading_overlay">
			<div id="loading_message"><span>Loading, please wait...</span></div>
		</div>
		<div id="dialog_overlay"></div>
		<div id="enlargement" style="">
	        <div id="svgenlargement"  class="fillPage"></div>
		</div>
	</div>
	
	<div id="update_workspace_button"></div>
	
	<div id="dialog-form" title="Create relation between two nodes...">
		<form id="collapse_node_form" action="#">
		<fieldset>
			<input type="hidden" name="source_id" id="source_node_id"/>
			<input type="hidden" name="source_text" id="source_node_text"/>
			<input type="hidden" name="target_id" id="target_node_id"/>
			<input type="hidden" name="target_text" id="target_node_text"/>
			<label for="rel_type">Relation type&nbsp;</label>
			<select name="type" id="rel_type" class=".ui-widget select">
			</select>
			<br/><br/>
			<label for="scope">Scope of relation&nbsp;</label>
			<select name="scope" id="scope" class=".ui-widget select">
			</select>
			<br/><br/>
			<label for="is_significant">Is this variance stemmatically significant?</label>
			<select name="is_significant" id="is_significant" class=".ui-widget select"/>
			</select>
			<br/><br/>
			<input type="checkbox" name="b_derivable_from_a" id="b_derivable_from_a"/>
			<label for="b_derivable_from_a"><span class="rel_rdg_a"></span> would be corrected to <span class="rel_rdg_b"></span>&nbsp;</label>
			<br/>
			<input type="checkbox" name="a_derivable_from_b" id="a_derivable_from_b"/>
			<label for="a_derivable_from_b"><span class="rel_rdg_b"></span> would be corrected to <span class="rel_rdg_a"></span>&nbsp;</label>
			<br/>
			<input type="checkbox" name="non_independent" id="non_independent"/>
			<label for="non_independent">Variants unlikely to arise coincidentally&nbsp;</label>
			<br/><br/>
			<label for="note">Annotation or note&nbsp;</label>
			<textarea rows="3" style="width:100%;" name="annotation" id="note" class=".ui-widget input"></textarea>
		</fieldset>
    	<div id="status"></div>		
		</form>
	</div>
	<div id="dialog_overlay"></div>

	<div id="delete-form" title="Relation info...">
		<form id="delete_relation_form" action="#">
			<input type="hidden" name="source_id" id="delete_source_node_id"/>
			<input type="hidden" name="target_id" id="delete_target_node_id"/>
		</form>
		<div id="delete-form-text">Type: <span id="delete_relation_type"></span><br/>
		    Scope: <span id="delete_relation_scope"></span><br/>
		    <span id="delete_relation_attributes"></span>
		    <span id="delete_relation_note"></span></div>
	</div>

	<div id="multipleselect-form" title="Multiple nodes selected...">
		<div id="multipleselect-form-status"></div>
	
		<div class="error" id="duplicate-merge-error">
		</div>

		Detach or merge?<br/>
		
		<form autocomplete="off">
			<label>
				<input id="action-detach" checked name='option' type='radio' /> Detach
			</label>

			<label>
				<input id="action-merge" name='option' type='radio' /> Merge
			</label>
		</form>

		<div id="multipleselect-form-text">Select witness(es) to detach:</div>
		<form id="detach_collated_form" action="#">
		</form>
	</div>
	
	<div id="reading-form" title="Reading info...">
		<form id="reading_data_form" action="#">
			<input type="hidden" name="reading_id" id="reading_id"/>
			<div class="morph">
				<input type="checkbox" name="reading_is_nonsense" id="reading_is_nonsense"/>
				<label for="reading_is_nonsense">This is a nonsense word</label>
				<br/>
				<input type="checkbox" name="reading_grammar_invalid" id="reading_grammar_invalid"/>
				<label for="reading_grammar_invalid">This word's grammar cannot be right</label>
			</div>
			<br/><br/>
			<!-- Morphological options go here -->
			<div id="normalization" class="morph">
				<label for="reading_normal_form">Normalized form: </label>
				<input type="text" name="reading_normal_form" id="reading_normal_form"></input>
				<button id="reading_relemmatize" onclick="relemmatize(); return false;">Re-lemmatize</button>
			</div>
			<div id="relemmatize_pending">
				<img src="[% c.uri_for('/images/ajax-loader.gif') %]"/>
			</div>
			<br/><br/>
			<div id="morph_outer" class="morph">
				<label>Lemma / part of speech:</label><br/>
				<div id="morphology"></div>
			</div>
			</select>
			<div id="reading_status"></div>
		</form>
    </div>
	
    <p/><p/>	
    <div id="keymap">
        <ul id="keymaplist">
          <li></li>
        </ul>
    </div>
    
[% PROCESS footer.tt %]