<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>TF {{appName}}-{{jobName}}</title>
		<meta name="application-name" content="TF Search Box"/>
		<link rel="shortcut icon" href="/browser/static/favicon.ico">
		<link rel="stylesheet" href="/browser/static/colors.css"/>
		<link rel="stylesheet" href="/browser/static/base.css"/>
		<link rel="stylesheet" href="/browser/static/display.css"/>
		<link rel="stylesheet" href="/browser/static/highlight.css"/>
    <link rel="stylesheet" href="/browser/static/fonts.css"/>
		<link rel="stylesheet" href="/browser/static/index.css"/>
		<link rel="stylesheet" href="/browser/static/fontawesome.css">
		{{css|safe}}
		<script defer src="/browser/static/jquery.js"></script>
		<script defer src="/browser/static/tf3.0.js"></script>
    {{mathjax|safe}}
	</head>
	<body>
		<form id="go" method="post" enctype="multipart/form-data">
		<input type="hidden" id="appName" name="appName" value="{{appName}}"/>
    <input type="hidden" id="dstate" name="dstate" value="{{dstate}}"/>
		<div class="page">
			<div id="sidebar">
				<div status="about">
					<a href="#"><img class="icon" src="/browser/static/icon.png"/></a>
				</div>
				<div status="help">
					<a href="#">Help</a>
				</div>
				<div status="corpus">
					<a href="#">Corpus</a>
				</div>
				<div status="options">
					<a href="#">Options</a>
				</div>
				<div status="annotate">
					<a href="#">Annotate</a>
				</div>
			</div>
			<div id="sidebarcont">
				<input type="hidden" id="side" name="side" value="{{side}}"/>
				<div status="about">
					<div>
						<p><a target="_blank" href="https://github.com/annotation/text-fabric">Text-Fabric</a>
               is made by
						   <a target="_blank" href="https://pure.knaw.nl/portal/en/persons/dirk-roorda">Dirk Roorda</a>
						</p>
					</div>
					<div><img class="mainlogo" src="/browser/static/huc.png"/></div>
				</div>
				<div status="corpus">
					<div class="colophon">
						{{colophon|safe}}
					</div>
					<div class="header">
						{{header|safe}}
					</div>
        </div>
				<div status="options">
          <input type="hidden" id="resetf" name="resetForm" value="{{resetForm}}">
					<div>
            <details id="options" class="dstate">
              <summary>
                <span class="ilab">text formats</span>
							</summary>
              {{chooser["textFormat"]|safe}}
            </details>
					</div>
          <hr>
					<div>
						<details id="basetpd"  class="dstate">
							<summary>
                <span class="ilab">base types</span>
							</summary>
							{{chooser["baseTypes"]|safe}}
            </details>
					</div>
          <hr>
					<div>
						<details id="edgeftd"  class="dstate">
							<summary>
                {{forceEdgesOption|safe}}
							</summary>
							{{chooser["edgeFeatures"]|safe}}
            </details>
					</div>
          <hr>
					<div>
						<details id="hiddentpd"  class="dstate">
							<summary>
                {{hideTypesOption|safe}}
							</summary>
							{{chooser["hiddenTypes"]|safe}}
            </details>
					</div>
          <hr>
					<div>
						<details id="condd" class="dstate">
							<summary>
                {{condensedOption|safe}}
							</summary>
							{{chooser["condenseType"]|safe}}
						</details>
					</div>
          <hr>
          {{options|safe}}
				</div>
				<div status="help">
					<details id="helpTf" class="help dstate">
						<summary>TF Browser</summary>
            <p>Explore the <b>{{appName}}</b> corpus.</p>
						<p>Use the
							<span class="sections">{{defaultCondenseType}}</span>,
							<span class="tuples">node</span>, and
							<span class="query">search</span> pads
							to specify material of interest.</p>
						<p>Copy individual results to the <span class="tuples">node pad</span>
						   to compare them to each other.</p>
            <p>Tweak the way you display your corpus and highlight your results
               with a variety of colours.</p>
            <p>Describe your study and export your work.</p>
            <p>Download your query and results and metadata.</p>
					</details>
					<details id="helpSections" class="help dstate sections">
						<summary>{{defaultCondenseType.capitalize()}} pad</summary>
						<p>Enter a reference here,
						   such as {{exampleSectionHtml|safe}}.</p>
						<p>Copy {{defaultCondenseType}}s to here by clicking on a
						   {{defaultCondenseType}} reference in the result list.</p>
						<p>Click <b>Go</b> to fetch the results.</p>
						<p>The results of the references appear in the result list,
						   with a negative sequence number.</p>
					</details>
					<details id="helpTuples" class="help dstate tuples">
						<summary>Node Pad</summary>
						<p>Enter a node or list of nodes here,
						   such as <code>123</code> or
						   <code>123,456,789</code>.</p>
            <p>Get nodes here by clicking on a sequence number of a result.</p>
						<p>Get a node here by clicking on its number
						   (when the option <i>show nodes</i> is checked).</p>
						<p>Click <b>Go</b> to fetch the results, they appear with a negative
               sequence number.</p>
					</details>
					<details id="helpTemplate" class="help dstate query">
						<summary>Search Pad</summary>
						<p>Enter a search template here.</p>
						<p>Click <b>Go</b> to fetch the results, they appear with a positive
               sequence number.</p>
            <p>If the query is not valid, you get a message why.</p>
            <p>The <b>Corpus</b> tab contains links to relevant documentation.</p>
					</details>
          <details id="helpColormap" class="help dstate colormap">
            <summary>Color map for query results</summary>
            <p>Queries consist of several atoms: the nodes you search for.
               The parts of the results that match these atoms can be highlighted with
               different colours. By default, all parts get yellow highlights,
               but you can provide a color mapping to map atom positions to
               colours.</p>
            <p>You find the color map under <b>query highlighting</b> under
               the <span class="query">search</span> pad.
               If it is empty, click the <code>+</code> button.
               A color selector appears. You can press the <code>+</code> button
               again to add as many color selectors as you wish. You can remove them
               by pressing the <code>-</code> button.
               You can select different colours in all these boxes.
               The <i>n</i>-th atom of each query result will be highlighted in the
               color of the <i>n</i>-th color box.</p>
          </details>
          <details id="helpEColormap" class="help dstate ecolormap">
            <summary>Color map for edges</summary>
            <p>In pretty displays, edge information may be visible, see
               <b>show / hide selected edge features</b> under the <b>Options</b>
               tab.</p>
            <p>You can color edge information in order to see which nodes
               have edges to which nodes. By default, no edges are coloured, but you
               can provide an edge color mapping.</p>
            <p>You find the edge color map under the <b>edge highlighting</b> tab under
               the <span class="query">search</span> pad.</p>
            <p>If it is empty, you can add entries by clicking an edge feature
               in a pretty display: these are marked by having the character
               or ⇥ in ↦ them. After the click, three entries are added.</p>
            <p>In each of these entries you see the name of the edge feature,
               a color select box, a <code>-</code> button to remove the entry,
               and an edge specification.</p>
            <p>The edge specification may take three forms:</p>
            <p><code>from</code> ↦ <code>to</code>: one edge between these nodes;</p>
            <p><code>from</code> ↦ <i>any</i>: all edges from this node;</p>
            <p><i>any</i> ↦ <code>to</code>: all edges to this node.</p>
            <p>In this way you can color all edges to and from a specific node.</p>
            <p>You can color as many edges as you want by clicking edges repeatedly.</p>
          </details>
					<details id="helpResults" class="help dstate">
						<summary>Result list</summary>
						<p>Show the text in the {{defaultTextFormat}} text format:
						   see the <i>text format</i> option.</p>
						<p>Group results by {{defaultCondenseType}}:
						   see the <i>condense</i> option.</p>
						<p>Click the triangle to expand a result into a pretty view.</p>
						<p>If nothing happens, check the <i>condense</i> option:
						   nodes that are bigger than the condense node type,
						   will not be expanded into pretty view. Either uncheck the
						   <i>condense</i> option or select a bigger condense type.</p>
            <p>Click the <i>expand all</i> checkbox to collapse and open all
               results.</p>
            <p>Click the sequence number to add the nodes in this result to the
               <i>node pad</i>.</p>
            <p>Click the reference, to add it to the
               <i>{{defaultCondenseType}}pad</i>.</p>
						<p>Use the navigation button to walk through the results.</p>
						<p>Results that you have expanded remain in view.</p>
					</details>
					<details id="helpOptions" class="help dstate">
						<summary>Options</summary>
						<p><b title="fmt='text-orig-full'">Text format</b>
               Show the results in a text format of your choice: original script,
						   transcription, or phonetic representations may be offered,
               depending on how the corpus has been created.</p>
            <p><b title="baseTypes={nodeType1, nodeType2}">Base types</b>
               These types of nodes count as base types. The components of base
               nodes will not be broken down in pretty displays. Highlights of
               base nodes consist of coloured backgrounds, highlights of other
               nodes consist of coloured boxes around the nodes.</p>
            {{optionsHelp|safe}}
					</details>
					<details id="helpJobs" class="help dstate">
						<summary>Jobs</summary>
						<p>Your job has a name, shown at the top above the
							<span class="sections">{{defaultCondenseType}}-</span>-pad.
						  Your browser remembers your jobs, and you can switch between those jobs.
              You can also export jobs as files if you need to use a job across
              browsers, or if you want to share a job with others. And, of
              course, you can import jobs from file.
            </p>
            <p><button class="medium active">↑</button>
               <b>Import a job from a file.</b>
               This must be a JSON file, preferably one saved by TF.</p>
            <p><button class="medium active">+</button>
               <b>Start a new job.</b>
               The current job will be saved, and you will be prompted for a
               different name for the new job.</p>
            <p><button class="medium active">++</button>
               <b>Duplicate the current job.</b>
               The current job will be remembered as is, and you will be prompted for
               a different name for the duplicate job.</p>
            <p><button class="medium active">i</button>
               <b>Provide metadata for the job.</b>
						   Provide your name, title, and description (markdown is supported).
               There are some additional controls here to *export* the data of your
               job, see <b>Export</b> below.</p>
            <p><button class="medium active">↓</button>
               <b>Save the current job on file.</b>
               The file will be saved to your donwloads folder.
               a different name for the new job.</p>
            <p><button class="medium active">→</button>
               <b>Rename the current job.</b>
               You will be prompted for a new name.</p>
            <p><button class="medium active">0</button>
               <b>Clear the current job.</b>
               The information of this job will be reset to the default values, but the
               name will remain unchanged.</p>
            <p><button class="medium active">-</button>
               <b>Delete the current job.</b>
               Your browser will no longer remember it.
               After this, the default job will be selected.</p>
					</details>
					<details id="helpExport" class="help dstate">
						<summary>Export</summary>
						<p>Export your results.
               Click <button class="medium active">i</button>
               to provide your name, title, and description (markdown is supported).</p>
            <p>Below the metadata you entered there are two buttons:</p>
						<p><button class="fa fa-print medium active"></button>:
              <b>Print / PDF-friendly version</b>
						   The exported page opens in a new window or tab, in a form that is
               especially handy to save as PDF (from within the browser).<br>
               The PDF will contain a complete description of your work, with
               persistent links to the corpora and the tools, with additional
               metadata, and with the information
						   you specify. It reflects the results as you see them on your screen.</p>
						<p><button class="fa fa-download medium active"></button>:
               <b>Download data</b>
               Download the data of the current job, including its results.
               corresponding to the current job:</p>
            <p><b>(1) a file <code>resultsx.tsv</code></b>
               with all your query results (uncondensed).
               <i>This file can directly be opened in Excel.</i>
						   Every row corresponds with a result tuple of nodes.
						   It contains result sequence number, a section reference to where
						   the result occurs, and fields for the member nodes.
               Every member of the result tuple corresponds to a few columns:
               node number, node type, full text,
						   and features that you have used in the search template for that node.<br>
               <b>Hint:</b> If you want to include more features, use them with
               a trivial condition in your template,
               like so: <code>fff*</code> where <code>fff</code> is the name of
               your feature. The <code>*</code>
						   operator means: <i>no value restriction</i>.</p>
            <p><b>(2) a markdown file <code>about.md</code></b>
               with the metadata and description.</p>
            <p><b>(3) <code>.tsv</code> files</b>
               corresponding to the results of the contents of the pads:
               these files contain the node numbers only.</p>
            <p><b>(4) a file <code>job.json</code></b>
               with the job information, exactly as what you get when you press
               <button class="medium active">↓</button>.</p>
            <p><b>Tip</b> Archive the PDF and data files in an online
               repository, and you can cite your work properly.</p>
					</details>
				</div>
				<div status="annotate">
					<a href="/ner/index" target="ner">named entities editor</a>
        </div>
			</div>
			<div class="leftcol">
        <div id="jobs">
          <span>&nbsp;</span>
					<input
						id="jobh" type="hidden" name="jobName"
						value="{{jobName}}"
					/>
					<input
						id="jobl" type="hidden" name="loadJob"
						value="{{loadJob}}"
					/>
          <input
            type="file" id="jfile"
            accept="application/json"
            style="display: none;"
          >
					<input
						id="jmetaopen" type="hidden" name="metaopen"
						value="{{metaopen}}"
					/>
          <button
            type="button" class="medium active" id="jopen"
            title="import job from file"
          >↑</button>
          <button
            type="submit" class="medium active" id="jnew"
            title="start a new job"
          >+</button>
          <button
            type="submit" class="medium active" id="jdup"
            title="duplicate current job"
          >++</button>
          <select class="selinp" id="jchange"></select>
          <button
            type="button" class="medium active" id="jmeta"
            title="provide metadata for this job"
          >i</button>
          <button
            type="submit" class="medium active" id="exportj"
            formaction="/downloadj" formtarget="_new"
            title="save job as file in Downloads"
          >↓</button>
          <button
            type="submit" class="medium active" id="jrename"
            title="rename current job"
          >→</button>
          <button
            type="submit" class="medium active" id="jclear"
            title="clear current job"
          >0</button>
          <button
            type="submit" class="medium active" id="jdelete"
            title="delete current job"
          >-</button>
        </div>
        <div id="exportmeta">
          <p class="ilab">Author</p>
          <div>
            <input
              class="name" type="text" name="author" value="{{author}}"
              placeholder="My Name"
            />
          </div>
          <p class="ilab">Title</p>
          <div>
            <input
              class="name" type="text" name="title" value="{{title}}"
              placeholder="Title"
            />
          </div>
          <p class="ilab">Description</p>
          <div class="description">
            <textarea
              class="description" name="description"
              placeholder="Description"
            >{{description}}</textarea>
          </div>
          <p class="ilab">
            <button
              type="submit" formaction="/download" formtarget="_new"
              title="download all data of this job as zip file"
              class="medium active"
            ><span class="fa fa-download"></span></button>
            <button
              type="submit" formaction="/export" formtarget="_new"
              title="print-friendly version of this job"
              class="medium active"
            ><span class="fa fa-print"></span></button>
          </p>
          <div id="queryMessagesExport" class="messages">
            {{messages}}
          </div>
        </div>
				<hr>

				<p class="ilab">
					<button
						id="sectionsGo" class="xl fa fa-search"
						title="get {{defaultCondenseType}}s"
						type="button"
					></button>
					{{defaultCondenseType}} pad
				</p>
				<textarea
					id="sections" class="sections" name="sections"
					placeholder="{{exampleSection}}"
				>{{sections}}</textarea>
				<div id="sectionMessages" class="messages">
				</div>

				<hr>

				<p class="ilab">
					<button
						id="tuplesGo" class="xl fa fa-search" type="button"
						title="get nodes"
					></button>
					node pad
				</p>
				<textarea
					id="tuples" class="tuples" name="tuples"
					placeholder="100,101,102"
				>{{tuples}}</textarea>
				<div id="tupleMessages" class="messages">
				</div>

				<hr>

				<p class="ilab">
					<button
						id="queryGo" class="xl" type="button"
						title="run query and get results"
					><span class="fa fa-search"></span></button>
					search pad
				</p>
				<textarea
					id="query" class="query" name="query"
					placeholder="{{defaultCondenseType}}"
				>{{query}}</textarea>
				<div id="setNames" class="setnames">
				</div>
				<div id="queryMessages" class="messages">
				</div>

        {{colorMapHtml|safe}}

        {{eColorMapHtml|safe}}

        {{characters|safe}}

				<hr>
			</div>
			<div class="midcol">
				<div class="materialnav">
					<input type="hidden" name="mode" id="mode" value="{{mode}}"/>
					<div>
						<p class="ilab"><button
							type="button" id="modepassage"
							class="fa fa-solar-panel"
							title="browse passages"
						></button>
						<button
							type="button" id="moderesults"
							class="fa fa-list"
							title="to the results list"
						></button></p>
						<input type="hidden" name="sec0" id="sec0" value="{{sec0}}"/>
						<input type="hidden" name="sec1" id="sec1" value="{{sec1}}"/>
						<input type="hidden" name="sec2" id="sec2" value="{{sec2}}"/>
						<div id="passagesnav">
              <input
                type="text" id="s0filter" value="{{s0filter}}"
                autocomplete="off"
                placeholder="type to filter ..."
              />
            </div>
            <div id="passages" class="passages">
              {{passages|safe}}
            </div>
					</div>
					<div>
						<div id="navigation">
							<div class="expand sections">
								<span class="ilab sections">expand all {{defaultCondenseType}}s</span>
								<input type="checkbox" id="sectionsExpac"/>
								<input type="hidden" name="sectionsExpandAll" id="sectionsExpa" value="{{sectionsExpandAll}}"/>
							</div>
							<div class="expand tuples">
								<span class="ilab tuples">expand all nodes</span>
								<input type="checkbox" id="tuplesExpac"/>
								<input type="hidden" name="tuplesExpandAll" id="tuplesExpa" value="{{tuplesExpandAll}}"/>
							</div>
							<div class="expand query">
								<span class="ilab query">expand all results</span>
								<input type="checkbox" id="queryExpac" />
								<input type="hidden" name="queryExpandAll" id="queryExpa" value="{{queryExpandAll}}"/>
							</div>
							<div>
								<input
									class="r int" type="text" id="pos" name="position" value="{{position}}"
								/> <span class="ilab">current position</span>
							</div>
							<div>
								<input
									class="r int" type="text" name="batch" value="{{batch}}"
								/> <span class="ilab">results per page</span>
							</div>
						</div>
            <div id="nresults">
              <span class="total">Total&nbsp;<span class="nresults">0</span></span>
            </div>
						<div class="pages" id="pages">
							{{pages|safe}}
						</div>
					</div>
				</div>
			</div>
			<div class="rightcolx">
				<input
					type="hidden" id="passageOp" name="passageOpened"
					value="{{passageOpened}}"
				/>
				<input
					type="hidden" id="sectionsOp" name="sectionsOpened"
					value="{{sectionsOpened}}"
				/>
				<input
					type="hidden" id="tuplesOp" name="tuplesOpened"
					value="{{tuplesOpened}}"
				/>
				<input
					type="hidden" id="queryOp" name="queryOpened"
					value="{{queryOpened}}"
				/>
				<input
					type="hidden" id="features" name="features" value="{{features}}"/>
				<div id="sectionsTable" class="table"></div>
				<div id="tuplesTable" class="table"></div>
				<div id="queryTable" class="table"></div>
				<div id="passageTable" class="table"></div>
			</div>
		</div>
		</form>
	</body>
</html>
