<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{.Title}}</title>
    <base href="{{.ServiceURL}}" target="_blank">
    <link rel="stylesheet" href="{{.Stylesheet}}">
    <link rel="stylesheet" href="static/style.css">
    <script src="{{.SDK}}"
            data-server="{{.Server}}"></script>
</head>
<body>
    <div class="container" data-service-url="{{.ServiceURL}}" data-cookie-name="{{.CookieName}}">
        <h1>{{.Title}} - <span style="font-size: 0.8em;">{{.Description}}</span></h1>

        {{range .MappingSections}}
        <section class="mapping-section">
        <fieldset>
            <legend>{{.Title}}</legend>
            {{$section := .}}
            {{range $.AnnotationMappings}}
            <div class="mapping" data-id="{{.ID}}" data-type="annotation" data-mode="{{$section.Mode}}"
                 data-default-foundry-a="{{.FoundryA}}" data-default-layer-a="{{.LayerA}}"
                 data-default-foundry-b="{{.FoundryB}}" data-default-layer-b="{{.LayerB}}">
                <div class="mapping-row">
                    <input type="checkbox" id="check-{{.ID}}-{{$section.Mode}}" class="checkbox {{$section.CheckboxClass}}" name="{{$section.CheckboxName}}">
                    <label for="check-{{.ID}}-{{$section.Mode}}"><span></span><span class="data-mode">query</span> <strong>{{.ID}}</strong></label>
                    <div class="mapping-fields {{$section.FieldsClass}}">
                        <input type="text" class="{{$section.Mode}}-foundryA" placeholder="{{.FoundryA}}" size="8">/<input type="text" class="{{$section.Mode}}-layerA" placeholder="{{.LayerA}}" size="4">
                        <button type="button" class="{{$section.ArrowClass}}" data-dir="{{$section.ArrowDirection}}">{{$section.ArrowLabel}}</button>
                        <input type="text" class="{{$section.Mode}}-foundryB" placeholder="{{.FoundryB}}" size="8">/<input type="text" class="{{$section.Mode}}-layerB" placeholder="{{.LayerB}}" size="4">
                    </div>
                </div>
            </div>
            {{end}}
            {{range $.CorpusMappings}}
            <div class="mapping" data-id="{{.ID}}" data-type="corpus" data-mode="{{$section.Mode}}"
                 data-default-field-a="{{.FieldA}}" data-default-field-b="{{.FieldB}}">
                <div class="mapping-row">
                    <input type="checkbox" id="check-{{.ID}}-{{$section.Mode}}" class="checkbox {{$section.CheckboxClass}}" name="{{$section.CheckboxName}}">
                    <label for="check-{{.ID}}-{{$section.Mode}}"><span></span><span class="data-mode">corpus</span> <strong>{{.ID}}</strong></label>
                    <div class="mapping-fields {{$section.FieldsClass}}">
                        <input type="text" class="{{$section.Mode}}-fieldA" placeholder="{{.FieldA}}" size="10">
                        <button type="button" class="{{$section.ArrowClass}}" data-dir="{{$section.ArrowDirection}}">{{$section.ArrowLabel}}</button>
                        <input type="text" class="{{$section.Mode}}-fieldB" placeholder="{{.FieldB}}" size="10">
                    </div>
                </div>
            </div>
            {{end}}
        </fieldset>
        </section>
        {{end}}

        <section id="mapping-info">
          <dl>
            {{range .AnnotationMappings}}
            <dt>{{.ID}}:</dt>
            {{if .Description}}<dd>{{.Description}}</dd>{{end}}
            {{end}}
            {{range .CorpusMappings}}
            <dt>{{.ID}}:</dt>
            {{if .Description}}<dd>{{.Description}}</dd>{{end}}
            {{end}}
          </dl>

          <button type="button" id="reset-btn">Reset all</button>

          <span id="active-toggle">
            <input type="checkbox" id="check-active" class="checkbox">
            <label for="check-active"><span></span> <strong>Active</strong></label>
          </span>
        </section>

        <section class="mapping-section" id="pipe-info">
            <fieldset style="font-size: 0.8em;">
                <label class="cfg-line-label" for="request-cfg-preview">Request:</label>
            <input type="text" id="request-cfg-preview" class="cfg-preview request-cfg-preview" readonly value="">
            <label class="cfg-line-label" for="response-cfg-preview">Response:</label>
            <input type="text" id="response-cfg-preview" class="cfg-preview response-cfg-preview" readonly="readonly" value="">
        </fieldset>
    </section>

        <footer class="version">
            <p><tt>{{.Version}}<span style="display: none;"> - {{.Date}} - {{.Hash}}</span></tt></p>
        </footer>
    </div>
    <script src="static/config.js"></script>
</body>
</html>
