{% load custom_tags_and_filters %}
<form method="POST" action="{% url 'customize' 'tool_control' %}" class="form-horizontal">
    <div class="panel-body">
        {% csrf_token %}
        <h3 class="customization-section-title">Tool control</h3>
        <div class="form-group">
            <span class="control-label col-md-3">Tool usage options</span>
            <div class="col-md-9">
                <input type="text"
                       id="tool_control_use_self_label"
                       name="tool_control_use_self_label"
                       class="form-control"
                       value="{{ tool_control_use_self_label }}" />
            </div>
            <div class="col-md-offset-3 col-md-9 help-block light-grey">
                <label for="tool_control_use_self_label">
                    This is the default option. It's automatically selected for regular users, while staff can always choose it.
                </label>
            </div>
            <div class="col-md-offset-3 col-md-9" style="margin-bottom: 10px">
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_self_training">
                        <input type="checkbox"
                               id="tool_control_use_self_training_enabled"
                               name="tool_control_use_self_training_enabled"
                               {% if tool_control_use_self_training_enabled %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool for training (for trainers and staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_self_training"
                           id="tool_control_use_self_training_label"
                           name="tool_control_use_self_training_label"
                           class="form-control"
                           value="{{ tool_control_use_self_training_label }}" />
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9" style="margin-bottom: 10px">
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_for_other_training">
                        <input type="checkbox"
                               id="tool_control_use_for_other_training_enabled"
                               name="tool_control_use_for_other_training_enabled"
                               {% if tool_control_use_for_other_training_enabled %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool for training on behalf of someone else (staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_for_other_training"
                           id="tool_control_use_for_other_training_label"
                           name="tool_control_use_for_other_training_label"
                           class="form-control"
                           value="{{ tool_control_use_for_other_training_label }}" />
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9" style="margin-bottom: 10px">
                <input type="hidden" name="tool_control_use_for_other_enabled" value="off" />
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_for_other">
                        <input type="checkbox"
                               id="tool_control_use_for_other_enabled"
                               name="tool_control_use_for_other_enabled"
                               {% if tool_control_use_for_other_enabled == "enabled" %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool on behalf of another user (staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_for_other"
                           id="tool_control_use_for_other_label"
                           name="tool_control_use_for_other_label"
                           class="form-control"
                           value="{{ tool_control_use_for_other_label }}" />
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9" style="margin-bottom: 10px">
                <input type="hidden" name="tool_control_use_for_other_staff_charge_enabled" value="off" />
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_for_other_staff_charge">
                        <input type="checkbox"
                               id="tool_control_use_for_other_staff_charge_enabled"
                               name="tool_control_use_for_other_staff_charge_enabled"
                               {% if tool_control_use_for_other_staff_charge_enabled == "enabled" %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool on behalf of another user and <b>charge staff time</b> (staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_for_other_staff_charge"
                           id="tool_control_use_for_other_staff_charge_label"
                           name="tool_control_use_for_other_staff_charge_label"
                           class="form-control"
                           value="{{ tool_control_use_for_other_staff_charge_label }}" />
                    <div class="checkbox" id="tool_control_use_for_other_area_access_automatically_checkbox">
                        <input type="hidden" name="tool_control_use_for_other_area_access_automatically_enabled" value="off" />
                        <label id="label_tool_control_use_for_other_area_access_automatically" style="min-height: 27px">
                            <input type="checkbox"
                                   id="tool_control_use_for_other_area_access_automatically_enabled"
                                   name="tool_control_use_for_other_area_access_automatically_enabled"
                                   {% if tool_control_use_for_other_area_access_automatically_enabled == "enabled" %}checked{% endif %}
                                   value=""
                                   onchange="on_tool_control_option_change()">
                            Charge area access time automatically in addition to staff time
                        </label>
                        <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                            <input type="text"
                                   aria-labelledby="label_tool_control_use_for_other_area_access_automatically"
                                   id="tool_control_use_for_other_area_access_automatically_label"
                                   name="tool_control_use_for_other_area_access_automatically_label"
                                   class="form-control"
                                   value="{{ tool_control_use_for_other_area_access_automatically_label }}" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9" style="margin-bottom: 10px">
                <input type="hidden" name="tool_control_use_for_other_remote_enabled" value="off" />
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_for_other_remote">
                        <input type="checkbox"
                               id="tool_control_use_for_other_remote_enabled"
                               name="tool_control_use_for_other_remote_enabled"
                               {% if tool_control_use_for_other_remote_enabled == "enabled" %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool on behalf of another user for a remote project (staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_for_other_remote"
                           id="tool_control_use_for_other_remote_label"
                           name="tool_control_use_for_other_remote_label"
                           class="form-control"
                           value="{{ tool_control_use_for_other_remote_label }}" />
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9">
                <input type="hidden" name="tool_control_use_for_other_remote_staff_charge_enabled" value="off" />
                <div class="checkbox" style="padding-top: 0">
                    <label id="label_tool_control_use_for_other_remote_staff_charge">
                        <input type="checkbox"
                               id="tool_control_use_for_other_remote_staff_charge_enabled"
                               name="tool_control_use_for_other_remote_staff_charge_enabled"
                               {% if tool_control_use_for_other_remote_staff_charge_enabled == "enabled" %}checked{% endif %}
                               value="enabled"
                               onchange="on_tool_control_option_change()">
                        Show option to use a tool on behalf of another user for a remote project and <b>charge staff time</b> (staff only)
                    </label>
                </div>
                <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                    <input type="text"
                           aria-labelledby="label_tool_control_use_for_other_remote_staff_charge"
                           id="tool_control_use_for_other_remote_staff_charge_label"
                           name="tool_control_use_for_other_remote_staff_charge_label"
                           class="form-control"
                           value="{{ tool_control_use_for_other_remote_staff_charge_label }}" />
                    <div class="checkbox" id="tool_control_use_for_other_remote_area_access_automatically_checkbox">
                        <input type="hidden"
                               name="tool_control_use_for_other_remote_area_access_automatically_enabled"
                               value="off" />
                        <label id="label_tool_control_use_for_other_remote_area_access_automatically" style="min-height: 27px">
                            <input type="checkbox"
                                   id="tool_control_use_for_other_remote_area_access_automatically_enabled"
                                   name="tool_control_use_for_other_remote_area_access_automatically_enabled"
                                   {% if tool_control_use_for_other_remote_area_access_automatically_enabled == "enabled" %}checked{% endif %}
                                   value=""
                                   onchange="on_tool_control_option_change()">
                            Charge area access time automatically in addition to staff time
                        </label>
                        <div class="col-xs-offset-1 col-xs-11" style="padding-right: 0">
                            <input type="text"
                                   aria-labelledby="label_tool_control_use_for_other_remote_area_access_automatically"
                                   id="tool_control_use_for_other_remote_area_access_automatically_label"
                                   name="tool_control_use_for_other_remote_area_access_automatically_label"
                                   class="form-control"
                                   value="{{ tool_control_use_for_other_remote_area_access_automatically_label }}" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Run data history</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_hide_data_history_users"
                               name="tool_control_hide_data_history_users"
                               {% if tool_control_hide_data_history_users %}checked{% endif %}
                               value="enabled">
                        Check to only show run data history tab for staff members
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Hide tool owners</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_hide_tool_owners"
                               name="tool_control_hide_tool_owners"
                               {% if tool_control_hide_tool_owners %}checked{% endif %}
                               value="enabled">
                        Check to hide tool owners information (primary, backup and superusers) from the details page
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Note</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_note_show"
                               name="tool_control_note_show"
                               {% if tool_control_note_show %}checked{% endif %}
                               value="enabled">
                        Check to allow users to set notes for their tool usage
                    </label>
                    <br>
                    <label>
                        <input type="checkbox"
                               id="tool_control_note_copy_reservation"
                               name="tool_control_note_copy_reservation"
                               {% if tool_control_note_copy_reservation %}checked{% endif %}
                               value="enabled">
                        Check to copy over the reservation note (if any) to the tool usage
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Next reservation</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_show_next_reservation_user"
                               name="tool_control_show_next_reservation_user"
                               {% if tool_control_show_next_reservation_user %}checked{% endif %}
                               value="enabled">
                        Check to show information about the next reservation in tool control
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Prefill post usage questions</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_prefill_post_usage_with_pre_usage_answers"
                               name="tool_control_prefill_post_usage_with_pre_usage_answers"
                               {% if tool_control_prefill_post_usage_with_pre_usage_answers %}checked{% endif %}
                               value="enabled">
                        Prefill post usage questions with pre usage answers (matched by question name)
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Qualified users list</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_show_qualified_users_to_all"
                               name="tool_control_show_qualified_users_to_all"
                               {% if tool_control_show_qualified_users_to_all %}checked{% endif %}
                               value="enabled">
                        Check to allow everyone to see who is qualified on a tool
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Tool documents</label>
            <div class="col-sm-8 col-md-9">
                <div class="radio">
                    <label>
                        <input type="radio"
                               id="tool_control_show_documents_only_qualified_users_2"
                               name="tool_control_show_documents_only_qualified_users"
                               {% if not tool_control_show_documents_only_qualified_users %}checked{% endif %}
                               value="">
                        Everyone can see tool documents
                    </label>
                    <br>
                    <label>
                        <input type="radio"
                               id="tool_control_show_documents_only_qualified_users_1"
                               name="tool_control_show_documents_only_qualified_users"
                               {% if tool_control_show_documents_only_qualified_users %}checked{% endif %}
                               value="enabled">
                        Only show documents to qualified users
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-md-offset-3 col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_documents_in_separate_tab"
                               name="tool_control_documents_in_separate_tab"
                               {% if tool_control_documents_in_separate_tab %}checked{% endif %}
                               value="enabled">
                        Show tool documents in separate tab in tool control
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Email users with upcoming reservation</label>
            <div class="col-sm-8 col-md-9">
                <div class="radio">
                    <label>
                        <input type="radio"
                               id="tool_control_broadcast_upcoming_reservation_1"
                               name="tool_control_broadcast_upcoming_reservation"
                               {% if not tool_control_broadcast_upcoming_reservation %}checked{% endif %}
                               value="">
                        Staff only
                    </label>
                    <br>
                    <label>
                        <input type="radio"
                               id="tool_control_broadcast_upcoming_reservation_2"
                               name="tool_control_broadcast_upcoming_reservation"
                               {% if tool_control_broadcast_upcoming_reservation == "qualified" %}checked{% endif %}
                               value="qualified">
                        Qualified users
                    </label>
                    <br>
                    <label>
                        <input type="radio"
                               id="tool_control_broadcast_upcoming_reservation_3"
                               name="tool_control_broadcast_upcoming_reservation"
                               {% if tool_control_broadcast_upcoming_reservation == "all" %}checked{% endif %}
                               value="all">
                        All
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Show task details by default</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="tool_control_show_task_details"
                               name="tool_control_show_task_details"
                               {% if tool_control_show_task_details %}checked{% endif %}
                               value="enabled">
                        Show task details, such as who created the task and when, by default (click on the task to collapse/hide)
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4 col-md-3">Tool credentials</label>
            <div class="col-sm-8 col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="hidden" name="tool_control_show_tool_credentials" value="off" />
                        <input type="checkbox"
                               id="tool_control_show_tool_credentials"
                               name="tool_control_show_tool_credentials"
                               {% if tool_control_show_tool_credentials == "enabled" %}checked{% endif %}
                               value="enabled">
                        Show tool credentials to staff in tool control -> details tab
                    </label>
                </div>
            </div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <div class="text-center">{% button type="save" value="Save settings" %}</div>
    </div>
    <script type="text/javascript">
        function on_tool_control_option_change()
        {
            for (const name of ["tool_control_use_for_other", "tool_control_use_for_other_staff_charge", "tool_control_use_for_other_area_access_automatically", "tool_control_use_for_other_remote", "tool_control_use_for_other_remote_staff_charge", "tool_control_use_for_other_remote_area_access_automatically", "tool_control_use_self_training", "tool_control_use_for_other_training"])
            {
                const option_enabled_jq = $("#" + name + "_enabled");
                $("#" + name + "_label").toggle(option_enabled_jq.prop("checked"));
                if (name === "tool_control_use_for_other_remote_staff_charge")
                {
                    $("#tool_control_use_for_other_remote_area_access_automatically_checkbox").toggle(option_enabled_jq.prop("checked"));
                }
                if (name === "tool_control_use_for_other_staff_charge")
                {
                    $("#tool_control_use_for_other_area_access_automatically_checkbox").toggle(option_enabled_jq.prop("checked"));
                }
            }
        }
        
        on_tool_control_option_change();
    </script>
</form>