<div class="image_labeller">
    <nav class="labeller_menu_bar">
        <div class="labeller_menu_bar_right">
            <h4>Django labeller</h4>
        </div>
            <!-- We use `not x == False` so that the if succeeds by default if `x` does not exist !-->
            {% if not labelling_tool_config.tools.imageSelector == False %}
                <button type="button" class="btn btn-sm btn-warning btn-xs" id="btn_prev_image" data-toggle="tooltip"
                        data-placement="top" title="Previous image"><span class="oi oi-chevron-left"></span></button>
                <input type="number" class="form-control btn-sm bg-secondary image-chooser-control text-light"
                       id="image_index_input"
                       name="image_index" data-toggle="tooltip" data-placement="top" title="Choose image">
                    / {{ num_images }}
                <button type="button" class="btn btn-sm btn-warning btn-xs" id="btn_next_image" data-toggle="tooltip"
                        data-placement="top" title="Next image"><span class="oi oi-chevron-right"></span></button>
                {% if enable_locking %}
                    <button type="button" class="btn btn-sm btn-success btn-xs" id="btn_next_unlocked_image" data-toggle="tooltip" data-placement="right" title="Next unlocked image"><span class="oi oi-chevron-right"></span><span class="oi oi-lock-unlocked"></span></button>
                {% endif %}
            {% endif %}

            <div class="labeller_menu_sep"></div>

            <button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#help_modal"><span class="oi
            oi-question-mark"></span> Instructions</button>

            <div class="labeller_menu_sep"></div>

            {% if not labelling_tool_config.settings.fullscreenButton == False %}
                <button class="btn btn-sm btn-info" id="btn_fullscreen"><span class="oi oi-fullscreen-enter"></span> Fullscreen</button>
            {% endif %}
    </nav>

    <!-- Toolbar !-->
    <aside class="tool_bar text-light">
        <!-- Tasks section !-->
        <div class="anno_lockable">
            {% if tasks %}
                <div class="tool_bar_header" data-toggle="collapse" data-target="#tool_group_tasks">Completed tasks</div>

                <div class="collapse show tool_bar_group" id="tool_group_tasks">
                    <div class="tool_bar_content">
                        <div class="form-check">
                            {% for task in tasks %}
                                <input type="checkbox" class="form-check-input" id="task_{{ task.name }}" name="task_{{ task.name }}">
                                <label class="form-check-label" for="task_{{ task.name }}">{{ task.human_name }}</label><br/>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- Label visibility section !-->
{#        <div class="tool_bar_header" data-toggle="tooltip" data-placement="right"#}
{#                   title="Control overall appearance, filter by class">Label visibility</div>#}
        <div class="tool_bar_header" data-toggle="collapse" data-target="#tool_group_label_appearance"
                   title="Control overall appearance, filter by class">Label appearance</div>
        <div class="collapse show tool_bar_group" id="tool_group_label_appearance">

            <!-- Labels hidden, faint or full !-->
            <div class="btn-group btn-group-toggle tool_bar_content" data-toggle="buttons">
                <label class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top"
                       title="Make labels completely invisible">
                    <input type="radio" name="labelvis" value="hidden" id="label_vis_radio_hidden"
                           autocomplete="off">
                    Hidden
                </label>
                <label class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top"
                       title="Make labels faint, revealing image underneath">
                    <input type="radio" name="labelvis" value="faint" id="label_vis_radio_faint" autocomplete="off">
                    Faint
                </label>
                <label class="btn btn-sm btn-info active" data-toggle="tooltip" data-placement="top"
                       title="Labels fully visible">
                    <input type="radio" name="labelvis" value="full" id="label_vis_radio_full" autocomplete="off"
                           checked> Full
                </label>
            </div>

            {% if not labelling_tool_config.tools.labelClassFilter == False %}
                <!-- Filter labels by class !-->
                <div class="tool_bar_content">
                    Filter by label class:
                    {% if not labelling_tool_config.useClassSelectorPopup == False %}
                        <button class="btn btn-sm btn-secondary w-100" id="label_class_filter_menu_btn"><span class="menu_choice">-- ALL --</span> <span class="oi oi-chevron-bottom"></span></button>
                    {% else %}
                        <select class="form-control btn-sm bg-secondary border-secondary text-light" id="label_class_filter_select">
                            <option value="__all" selected="true">-- ALL --</option>
                            {% for group in labelling_schema.label_class_groups %}
                                <optgroup label="{{ group.group_name }}">
                                {% for lcls in group.group_classes %}
                                    <option value="{{ lcls.name }}">{{ lcls.human_name }}</option>
                                {% endfor %}
                                </optgroup>
                            {% endfor %}
                            <option value="__unclassified">UNCLASSIFIED</option>
                        </select>
                    {% endif %}
                </div>
            {% endif %}


            <!-- Filter labels by anno control state !-->
            {% for ann_ctrl in anno_controls %}
                {% if ann_ctrl.visibility_label_text %}
                    {% if ann_ctrl.control == 'checkbox' %}
                        <div class="tool_bar_content">
                            {{ ann_ctrl.visibility_label_text | safe }}:
                            <select class="form-control btn-sm bg-secondary border-secondary text-light" id="vis_filter_anno_ctrl_{{ ann_ctrl.identifier | safe }}">
                                <option value="__all" selected="true">-- ALL --</option>
                                <option value="false">False</option>
                                <option value="true">True</option>
                                <option value="__no_value">NO VALUE</option>
                            </select>
                        </div>
                    {% elif ann_ctrl.control == 'radio' %}
                        <div class="tool_bar_content">
                            {{ ann_ctrl.visibility_label_text | safe }}:
                            <select class="form-control btn-sm bg-secondary border-secondary text-light" id="vis_filter_anno_ctrl_{{ ann_ctrl.identifier | safe }}">
                                <option value="__all" selected="true">-- ALL --</option>
                                {% for choice in ann_ctrl.choices %}
                                    <option value="{{ choice.value | safe }}">{{ choice.label_text | safe }}</option>
                                {% endfor %}
                                <option value="__no_value">NO VALUE</option>
                            </select>
                        </div>
                    {% elif ann_ctrl.control == 'popup_menu' %}
                        <div class="tool_bar_content">
                            {{ ann_ctrl.visibility_label_text | safe }}:
                            <select class="form-control btn-sm bg-secondary border-secondary text-light" id="vis_filter_anno_ctrl_{{ ann_ctrl.identifier | safe }}">
                                <option value="__all" selected="true">-- ALL --</option>
                                {% for group in ann_ctrl.groups %}
                                    {% for choice in group.choices %}
                                        <option value="{{ choice.value | safe }}">{{ choice.label_text | safe }}</option>
                                    {% endfor %}
                                {% endfor %}
                                <option value="__no_value">NO VALUE</option>
                            </select>
                        </div>
                    {% endif %}
                {% endif %}
            {% endfor %}


            <!-- Colour scheme !-->
            <div class="tool_bar_content">
                {% if labelling_schema.colour_schemes %}
                    Colour scheme:
                    <select class="form-control btn-sm bg-secondary border-secondary text-light" id="colour_scheme_menu">
                        {% for cs in labelling_schema.colour_schemes %}
                            <option value="{{ cs.name }}">{{ cs.human_name }}</option>
                        {% endfor %}
                    </select>
                {% endif %}
            </div>

        </div>


        <div id="lock_warning" class="anno_hidden">
            <div class="tool_bar_header text-danger">Locked!</div>
            <div class="tool_bar_content">
                These labels are locked and cannot be edited. Someone else got there first :).
                Please choose another image (click the unlock button above to find the next unlocked image).
            </div>
        </div>

        <!-- Tools section !-->
        <div class="anno_lockable">
            <!-- Select and annotate sub-section !-->
            <div class="tool_bar_header" data-toggle="collapse" data-target="#tool_group_select">Select / annotate</div>

            <div class="collapse show tool_bar_group" id="tool_group_select">

                <div class="tool_bar_content">
                    {% if not labelling_tool_config.tools.deleteLabel == False %}
                        <button class="btn btn-sm btn-danger w-25 float-right" type="button" id="delete_label_button" data-toggle="tooltip"
                                data-placement="top" title="Delete selected labels (groups will be opened; the group will
                                be deleted but its members will remain)">
                            <span class="oi oi-trash"></span></button>
                    {% endif %}

                    <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="select_pick_button" data-toggle="tooltip"
                            data-placement="top" title="Pick labels one at a time, hold &lt;shift&gt; for multiple
                            selection">Pick</button>
                    {% if not labelling_tool_config.tools.brushSelect == False %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="select_brush_button" data-toggle="tooltip"
                            data-placement="top" title="Select labels by sweeping a brush over them,
                            change brush size with &lt;shift&gt;+scroll">Brush</button>
                    {% endif %}
                </div>

                {% if not labelling_tool_config.tools.labelClassSelector == False %}
                    <div class="tool_bar_content">
                        Change class:

                        <!-- Change class drop-down !-->
                        {% if not labelling_tool_config.useClassSelectorPopup == False %}
                            <button class="btn btn-sm btn-secondary w-100" id="label_class_selector_menu_btn"><span class="menu_choice">UNCLASSIFIED</span> <span class="oi oi-chevron-bottom"></span></button>
                        {% else %}
                            <select class="form-control btn-sm bg-secondary border-secondary text-light mb-1" id="label_class_selector_select">
                                {% for group in labelling_schema.label_class_groups %}
                                    <optgroup label="{{ group.group_name }}">
                                    {% for lcls in group.group_classes %}
                                        <option value="{{ lcls.name }}">{{ lcls.human_name }}</option>
                                    {% endfor %}
                                    </optgroup>
                                {% endfor %}
                                <option value="__unclassified" selected="true">UNCLASSIFIED</option>
                            </select>
                        {% endif %}
                    </div>
                {% endif %}

                <!-- Additional annotation controls !-->
                {% for ann_ctrl in anno_controls %}
                    {% if ann_ctrl.control == 'checkbox' %}
                        <div class="tool_bar_content">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}" name="anno_ctrl_{{ ann_ctrl.identifier | safe }}" disabled>
                                <label class="form-check-label text-muted" for="anno_ctrl_{{ ann_ctrl.identifier | safe }}">{{ ann_ctrl.label_text | safe }}</label>
                            </div>
                        </div>

                    {% elif ann_ctrl.control == 'radio' %}
                        <div class="tool_bar_content">
                            <label class="{% if ann_ctrl.label_on_own_line %}form-text{% endif %} text-muted" for="anno_ctrl_{{ ann_ctrl.identifier | safe }}">{{ ann_ctrl.label_text | safe }}:</label>
                        {% if ann_ctrl.label_on_own_line %}</div>{% endif %}
                            <div class="btn-group btn-group-toggle{% if ann_ctrl.label_on_own_line %} tool_bar_content{% endif %}" data-toggle="buttons" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}">
                                {% for radio_choice in ann_ctrl.choices %}
                                    <label class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top" title="{{ radio_choice.tooltip | safe }}">
                                        <input type="radio" name="anno_ctrl_{{ ann_ctrl.identifier | safe }}" value="{{ radio_choice.value | safe }}" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}_{{ radio_choice.value | safe }}"
                                               autocomplete="off" disabled>
                                        {{ radio_choice.label_text | safe }}
                                    </label>
                                {% endfor %}
                            </div>
                        {% if not ann_ctrl.label_on_own_line %}</div>{% endif %}

                    {% elif ann_ctrl.control == 'popup_menu' %}
                        <div class="tool_bar_content">
                            <label for="anno_ctrl_{{ ann_ctrl.identifier | safe }}" class="text-muted">{{ ann_ctrl.label_text | safe }}:</label>
                            <button class="btn btn-sm btn-secondary w-100" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}" disabled><span class="menu_choice"></span> <span class="oi oi-chevron-bottom"></span></button>
                        </div>

                    {% elif ann_ctrl.control == 'text' %}
                        <div class="tool_bar_content">
                            <label for="anno_ctrl_{{ ann_ctrl.identifier | safe }}" class="text-muted">{{ ann_ctrl.label_text | safe }}:</label>
                            {% if ann_ctrl.multiline %}
                                <textarea class="form-control" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}" disabled></textarea>
                            {% else %}
                                <input type="text" class="form-control" id="anno_ctrl_{{ ann_ctrl.identifier | safe }}" disabled>
                            {% endif %}
                        </div>

                    {% endif %}
                {% endfor %}

            </div>


            <!-- Edit labels sub-section !-->
            <div class="tool_bar_header" data-toggle="collapse" data-target="#tool_group_edit">Edit labels</div>

            <div class="collapse show tool_bar_group" id="tool_group_edit">

                <div class="tool_bar_content">
                    {% if not labelling_tool_config.tools.drawPolyLabel == False %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_poly_button" data-toggle="tooltip"
                            data-placement="top" title="Draw a polygonal label">Poly</button>
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="merge_poly_labels_button" data-toggle="tooltip"
                            data-placement="top" title="Merge polygonal labels; select labels first then
                            click here to merge them">MergeP</button>
                        {% if dextr_available %}
                            <button class="btn btn-sm btn-primary w-25 mb-1" type="button" id="dextr_button" data-toggle="tooltip"
                                data-placement="top" title="Automatic polygonal label">AutoP</button>
                        {% endif %}
                    {% endif %}
                    {% if not labelling_tool_config.tools.drawBoxLabel == False %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_box_button" data-toggle="tooltip"
                            data-placement="top" title="Draw a box label">Box</button>
                    {% endif %}
                    {% if not labelling_tool_config.tools.drawPointLabel == False %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_point_button" data-toggle="tooltip"
                            data-placement="top" title="Draw a point label">Point</button>
                    {% endif %}
                    {% if not labelling_tool_config.tools.drawOrientedEllipseLabel == False %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_oriented_ellipse_button" data-toggle="tooltip"
                            data-placement="top" title="Draw an oriented ellipse label">OEllipse</button>
                    {% endif %}
                    {% if labelling_tool_config.tools.groupLabel == True %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_group_button" data-toggle="tooltip"
                            data-placement="top" title="Group labels together; select labels first then
                            click here to group them">Group</button>
                    {% endif %}
                    {% if labelling_tool_config.tools.legacy.compositeLabel == True %}
                        <button class="btn btn-sm btn-info w-25 mb-1" type="button" id="draw_composite_button" data-toggle="tooltip"
                            data-placement="top" title="Associate labels; select labels first then
                            click here to associate them">Assoc.</button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Edit multi-polygon !-->
        <div class="tool_edit_multi_poly anno_hidden">
            <div class="tool_bar_tool_header">Multi-polygon</div>

            <div class="tool_bar_content">
                Mode:
                <div class="btn-group btn-group-toggle mb-1" data-toggle="buttons">
                    <label class="btn btn-sm btn-warning active" data-toggle="tooltip" data-placement="top"
                           title="The drawn region creates a new label">
                        <input type="radio" name="labelvis" value="hidden" id="multi_poly_boolean_new"
                               autocomplete="off">
                        New
                    </label>
                    <label class="btn btn-sm btn-warning" data-toggle="tooltip" data-placement="top"
                           title="Joins the new region with the existing label">
                        <input type="radio" name="labelvis" value="hidden" id="multi_poly_boolean_add"
                               autocomplete="off">
                        Add
                    </label>
                    <label class="btn btn-sm btn-warning" data-toggle="tooltip" data-placement="top"
                           title="Cuts the new region away from the current label">
                        <input type="radio" name="labelvis" value="faint" id="multi_poly_boolean_subtract" autocomplete="off">
                        Subtract
                    </label>
                    <label class="btn btn-sm btn-primary" data-toggle="tooltip" data-placement="top"
                           title="Splits the part of the current label under the drawn region into a separate label">
                        <input type="radio" name="labelvis" value="faint" id="multi_poly_boolean_split" autocomplete="off">
                        Split
                    </label>
                </div>
            </div>

            <div class="tool_bar_content">
                Draw:
                <div class="btn-group btn-group-toggle mb-1" data-toggle="buttons">
                    <label class="btn btn-sm btn-info active" data-toggle="tooltip" data-placement="top"
                           title="Draw polygon vertex by vertex">
                        <input type="radio" name="labelvis" value="hidden" id="multi_poly_draw_poly"
                               autocomplete="off">
                        Polygon
                    </label>
                    <label class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top"
                           title="Brush">
                        <input type="radio" name="labelvis" value="faint" id="multi_poly_draw_brush" autocomplete="off">
                        Brush
                    </label>
                </div>
            </div>
        </div>
    </aside>

    <div class="tool_canvas_container" id="anno_canvas_container">
        <svg class="tool_canvas" id="anno_canvas"></svg>
        <svg class="tool_canvas anno_hidden" id="loading_annotation">
            <rect x="0px" y="0px" width="100%" height="100%" fill="#404040"></rect>
            <text x="50%" y="50%" text-anchor="middle" fill="#e0e0e0" font-family="serif"
                      font-size="20px">Loading...</text>
        </svg>
    </div>
</div>


{% if not labelling_tool_config.useClassSelectorPopup == False %}
    <div class="tool_bar_popup hidden" id="label_class_selector_menu_contents">
        {% for group in labelling_schema.label_class_groups %}
            <h6 class="class_selector_group">{{ group.group_name }}</h6>
            {% for lcls in group.group_classes %}
              <button class="btn btn-sm btn-warning m-1 popup_menu_choice_button" type="button" data-choice="{{ lcls.name }}">
                {{ lcls.human_name }}
              </button>
            {% endfor %}
        {% endfor %}
        <h6 class="class_selector_group">Unclassified</h6>
        <button class="btn btn-sm btn-danger m-1 popup_menu_choice_button active" type="button" data-choice="__unclassified">
        <em>UNCLASSIFIED</em>
        </button>
    </div>


    <div class="tool_bar_popup hidden" id="label_class_filter_menu_contents">
        <h6 class="class_selector_group">Unclassified</h6>
        <button class="btn btn-sm btn-success m-1 popup_menu_choice_button active" type="button" data-choice="__all">
            <em>-- ALL --</em>
        </button>
        {% for group in labelling_schema.label_class_groups %}
            <h6 class="class_selector_group">{{ group.group_name }}</h6>
            {% for lcls in group.group_classes %}
              <button class="btn btn-sm btn-warning m-1 popup_menu_choice_button" type="button" data-choice="{{ lcls.name }}">
                {{ lcls.human_name }}
              </button>
            {% endfor %}
        {% endfor %}
        <h6 class="class_selector_group">Unclassified</h6>
        <button class="btn btn-sm btn-danger m-1 popup_menu_choice_button" type="button" data-choice="__unclassified">
            <em>UNCLASSIFIED</em>
        </button>
    </div>
{% endif %}


<!-- Popup contents for annotation controls !-->
{% for ann_ctrl in anno_controls %}
    {% if ann_ctrl.control == 'popup_menu' %}
        <div class="tool_bar_popup hidden" id="anno_ctrl_contents_{{ ann_ctrl.identifier | safe }}">
            {% for group in ann_ctrl.groups %}
                <h6 class="class_selector_group">{{ group.label_text | safe }}</h6>
                {% for choice in group.choices %}
                  <button class="btn btn-sm btn-warning m-1 popup_menu_choice_button" type="button" data-choice="{{ choice.value | safe }}"
                    data-toggle="tooltip" title="{{ choice.tooltip | safe }}">
                    {{ choice.label_text | safe }}
                  </button>
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}
{% endfor %}



<!-- Confirm delete -->
<div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="help_modal_title"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="help_modal_title">Confirm delete</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          Are you sure?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal"
                id="btn_delete_confirm_delete">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>


<!-- Help modal -->
<div class="modal fade" id="help_modal" tabindex="-1" role="dialog" aria-labelledby="help_modal_title"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="help_modal_title">Help</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <p>Panning and zooming:</p>
                    <ul>
                        <li>Use the scroll wheel (or scroll gesture on touch pad) to zoom in and out</li>
                        <li>Right-click drag to pan the image</li>
                    </ul>

                    <p>To navigate between images: (top bar with yellow buttons)</p>
                    <ul>
                        <li>Using the left and right arrow buttons to navigate the images one by one</li>
                        <li>Enter a number in the box between them to navigate to a specific image</li>
                    </ul>

                    <p>To label regions of the image:</p>
                    <ul>
                        {% if not labelling_tool_config.tools.drawPolyLabel == False %}
                            <li><strong>To draw polygonal labels onto the image, click the <em>Poly</em> button:</strong>
                                <ul>
                                    <li>You can now either draw the outlines of regions or brush regions the; at the bottom
                                        you will find two buttons; <em>Polygon</em> and <em>Draw</em></li>
                                        <ul>
                                            <li><strong>Polygon:</strong> <em>left-click</em> to draw polygonal corners of your region, or
                                                <em>&lt;shift&gt;-left-click-drag</em> to free-hand draw sections, <em>right-click</em> to finish</li>
                                            <li><strong>Brush:</strong> Click and drag to brush-paint over an area. Use either the
                                                <code>[</code> and <code>]</code> keys or <em>&lt;shift&gt;-scroll-wheel</em> to
                                                change the size of the brush.</li>
                                        </ul>
                                    <li>There are four modes:
                                        <ul>
                                            <li><strong>New:</strong> creates a new label for each region drawn or brushed</li>
                                            <li><strong>Add:</strong> joins the drawn region with the currently selected one</li>
                                            <li><strong>Subtract:</strong> cuts the drawn region away from the currently selected one and discards it</li>
                                            <li><strong>Split:</strong> splits the parts of the currently selected label that are inside the drawn region
                                                away into a new separate label, leaving the parts outside the drawn region in the selected label</li>
                                        </ul>
                                    </li>
                                    <li>You can merge multiple polygonal labels with the <em>MergeP</em> button, found to
                                        the right of the <em>Poly</em> button in the <em>Tools</em> section. Select the labels
                                        (see below) that you want to merge and click <em>MergeP</em>. If you select any labels that are not
                                        polygonal labels, nothing will happen.</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if dextr_available %}
                            <li><strong>For automatic object outlining, click the <em>AutoP</em> button:</strong>
                                <ul>
                                    <li>You must now identify the object that you wish to be outlined by clicking
                                    on four points in the following order:
                                        <ul>
                                            <li>A point at the <em>top</em> edge of the object</li>
                                            <li>A point at the <em>left</em> edge of the object</li>
                                            <li>A point at the <em>bottom</em> edge of the object</li>
                                            <li>A point at the <em>right</em> edge of the object</li>
                                        </ul>
                                    </li>
                                    <li>You will notice a bounding rectangle being built as you go.</li>
                                    <li>After choosing the 4th point, there will be a small delay, after which the
                                    bounding rectangle will be replaced by an automatically generated polygonal label</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.drawBoxLabel == False %}
                            <li><strong>Drawing rectangular regions onto the image:</strong>
                                <ul>
                                    <li>Click the <em>Box</em> button</li>
                                    <li>Within the image pane, left-click to place one corner and left click again to place another
                                        corner; the tool will create a box between the two</li>
                                    <li>Repeat the above for each box that you want to create</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.drawPointLabel == False %}
                            <li><strong>Highlighting points of interest in the image:</strong>
                                <ul>
                                    <li>Click the <em>Add point</em> button</li>
                                    <li>Within the image pane, left-click to place a point marker in the image</li>
                                    <li>Repeat the above for each point that you want to create</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.drawOrientedEllipseLabel == False %}
                            <li><strong>Drawing oriented elliptical regions onto the image:</strong>
                                <ul>
                                    <li>Click the <em>OEllipse</em> button</li>
                                    <li>Within the image pane, left-click to place one end of the ellipse, left click
                                        again to place the opposing end, determining the ellipses' first radius
                                        and orientation, then left click a third time to set the second radius</li>
                                    <li>Repeat the above for each ellipse that you want to create</li>
                                </ul>
                            </li>
                        {% endif %}

                        <li><strong>Selecting regions:</strong>
                            <ul>
                                <li>Selected regions have a red outline, yellow otherwise</li>
                                <li>If only <em>one</em> region is selected, clicking the <em>Draw</em> button will allow you to modify it; you will go back to <em>draw</em> mode</li>
                                <li>To select a different region, click the <em>Pick</em> button and choose a
                                    different region by clicking on it. Multiple regions can be selected by holding <em>SHIFT</em> while clicking.</li>
                                <li>If multiple regions overlap and you wish to select a region that is obscured, move the
                                    pointer over the region that you wish to select; the front-most region will be highlighted.
                                    Press the '<code>[</code>' and '<code>]</code>' keys to cycle through the regions under the
                                    pointer until the one that you need is highlighted. Left-click to select it.
                                </li>
                            </ul>
                        </li>

                        {% if not labelling_tool_config.tools.brushSelect == False %}
                            <li><strong>Brush-selecting regions:</strong>
                                <p>Useful to select large numbers of labels in one go or to get hard-to-reach
                                    labels</p>
                                <ul>
                                    <li>Click the <em>Brush</em> button</li>
                                    <li>A circular brush will follow the mouse pointer</li>
                                    <li>Left-click drag the circular brush over labels you want to select</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.groupLabel == False %}
                            <li><strong>Grouping smaller labels into one:</strong>
                                <ul>
                                    <li>Select the labels you wish to combine by <em>Shift</em>-clicking them</li>
                                    <li>Click the <em>Group</em> button to combine them into a group</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.deleteLabel == False %}
                            <li><strong>Deleting regions:</strong>
                                <ul>
                                    <li>Select regions using the select tool (see above)</li>
                                    <li>Click the wastebin button to delete them; you will be asked for confirmation</li>
                                    {% if labelling_tool_config.tools.deleteConfig.typePermissions.point == False or labelling_tool_config.tools.deleteConfig.typePermissions.box == False or labelling_tool_config.tools.deleteConfig.typePermissions.polygon == False or labelling_tool_config.tools.deleteConfig.typePermissions.composite == False or labelling_tool_config.tools.deleteConfig.typePermissions.group == False %}
                                        <li>Please note that you will be unable to delete:
                                            <ul>
                                                {% if labelling_tool_config.tools.deleteConfig.typePermissions.point == False %}<li>point labels</li>{% endif %}
                                                {% if labelling_tool_config.tools.deleteConfig.typePermissions.box == False %}<li>box labels</li>{% endif %}
                                                {% if labelling_tool_config.tools.deleteConfig.typePermissions.polygon == False %}<li>polygonal labels</li>{% endif %}
                                                {% if labelling_tool_config.tools.deleteConfig.typePermissions.composite == False %}<li>composite labels</li>{% endif %}
                                                {% if labelling_tool_config.tools.deleteConfig.typePermissions.group == False %}<li>group labels</li>{% endif %}
                                            </ul>
                                        </li>
                                    {% endif %}
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.labelClassSelector == False %}
                            <li><strong>Changing the label of a region:</strong>
                                <ul>
                                    <li>Select regions using the select tool (see above)</li>
                                    <li>Use the drop-down (normally reads <em>UNCLASSIFIED</em>) within the <em>Labels</em> section to change the label</li>
                                    <li><strong>Please note:</strong> for regions for which you <em>cannot</em> identify the content, use the <em>Excluded</em> label, this indicates to the system that it should not consider these parts of the image</li>
                                </ul>
                            </li>
                        {% endif %}

                        {% if not labelling_tool_config.tools.colour_schemes == False %}
                            <li><strong>Changing the colour scheme:</strong>
                                <ul>
                                    <li>Different colour schemes are available to help you differentiate different label classes
                                        when performing different tasks</li>
                                    <li>Select the colour scheme using the <em>Colour scheme</em> menu button</li>
                                </ul>
                            </li>
                        {% endif %}

                        <li><strong>If the coloured regions are obscuring parts of the image that you need to see:</strong>
                            <ul>
                                <li>Within the <em>Labels</em> section under <em>Label visibility</em>, choose between <em>hidden</em>
                                    <em>faint</em> and <em>full</em> to alter the visibility of the labels.</li>
                                <li>Alternatively press the <code>;</code> key to switch between them.</li>
                            </ul>
                        </li>

                        <li><strong>Completed tasks:</strong>
                            <ul>
                                <li>Under the <em>completed tasks</em> section there are a number of checkboxes.
                                These checkboxes are used to indicate that specific tasks for this image are complete,
                                e.g. if there is a segmentation/outlining checkbox and all objects of interest in an image have been
                                outlined, check this box to indicate that this task is done.</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
