{% extends "base.html" %}
{% set active_page = "settings" %}
{% block title %}Settings{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xl-12 offset-xl-0">
        <div class="row">
            <div class="col-xl-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="text-primary font-weight-bold m-0">App settings</h6>
                    </div>
                    <div class="card-body" style="min-height: 178px;">
                        <ul style="list-style-type: none" class="list-group list-group-flush">
                            <li class="list-group-item"><a href="#" data-toggle="modal"
                                    data-target="#changeDisplaySettings">Change
                                    display settings</a></li>
                            <li class="list-group-item"><a href="#" data-toggle="modal"
                                    data-target="#changeStorageSettings">Change storage location</a></li>
                            <li class="list-group-item"><a href="#" data-toggle="modal" data-target="#clearCache">Clear
                                    cache</a></li>
                            <li class="list-group-item" data-toggle="modal" data-target="#deleteAppData"><a href="#"
                                    class="text-danger">Delete app data</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="text-primary font-weight-bold m-0">Experimenter profiles</h6>
                    </div>
                    <div class="card-body" style="min-height: 178px;">
                        <ul style="list-style-type: none" class="list-group list-group-flush">
                            <li class="list-group-item"><a href="#" data-toggle="modal"
                                data-target="#addExperimenter">Add new experimenter</a></li>
                            <li class="list-group-item"><a href="/settings-experimenters">View/edit experimenter details</a></li>
                            <li class="list-group-item"><a onclick="exportExperimenters()" href="#">Export experimenter metadata</a></li>
                            <li class="list-group-item" data-toggle="modal" data-target="#deleteExperimenterData"><a href="#" class="text-danger">Delete all experimenter data</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="text-primary font-weight-bold m-0">Animal profiles</h6>
                    </div>
                    <div class="card-body" style="min-height: 178px;">
                        <ul style="list-style-type: none" class="list-group list-group-flush">
                            <li class="list-group-item"><a href="#" data-toggle="modal"
                                data-target="#addAnimal">Add new animal</a></li>
                            <li class="list-group-item"><a href="/settings-animals">View/edit animals</a></li>
                            <li class="list-group-item"><a onclick="exportAnimals()" href="#">Export animal metadata</a></li>
                            <li class="list-group-item" data-toggle="modal" data-target="#deleteAnimalData"><a href="#" class="text-danger">Delete all animal metadata</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="text-primary font-weight-bold m-0">Protocol presets</h6>
                    </div>
                    <div class="card-body" style="min-height: 178px;">
                        <ul style="list-style-type: none" class="list-group list-group-flush">
                            <li class="list-group-item"><a href="#">Add new protocol preset</a></li>
                            <li class="list-group-item"><a href="#">View/edit presets</a></li>
                            <li class="list-group-item"><a href="#">Export presets</a></li>
                            <li class="list-group-item"><a href="#" class="text-danger">Delete all protocol presets</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal popup forms -->
<div class="modal fade" id="changeDisplaySettings" tabindex="-1" role="dialog"
    aria-labelledby="changeDisplaySettingsTitle" 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="changeDisplaySettingsLongTitle">Display settings</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="display-width" class="col-sm-3 col-form-label">Width</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-width">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-height" class="col-sm-3 col-form-label">Height</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-height">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-fps" class="col-sm-3 col-form-label">Refresh rate</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-fps">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-fullscreen" class="col-sm-3 col-form-label">Fullscreen</label>
                        <div class="form-check">
                            <select id="display-fullscreen" class="form-control">
                                <option>true</option>
                                <option>false</option>
                            </select>
                        </div>
                    </div>
                </form>

                You will need to restart the app for changes to take effect.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="display-settings-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="changeStorageSettings" tabindex="-1" role="dialog"
    aria-labelledby="changeStorageSettingsTitle" 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="changeStorageSettingsLongTitle">Storage settings</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="storage-path" class="col-sm-3 col-form-label">Storage path</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="storage-path">
                        </div>
                    </div>
                </form>

                You will need to restart the app for changes to take effect.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="storage-settings-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="clearCache" tabindex="-1" role="dialog" aria-labelledby="clearCacheTitle"
    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="clearCacheLongTitle">Clear cache</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>The cache contains temporary files generated during the app's operation. Clearing the cache will not
                    affect session data.</p>
                <p>Clearing the cache will reclaim storage space on the device running Visiomode.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-warning" id="clear-cache-btn">Clear cache</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteAppData" tabindex="-1" role="dialog" aria-labelledby="deleteAppDataTitle"
    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="deleteAppDataLongTitle">Delete app data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Deleting app data will remove all session data and revert the app to its default settings.</p>
                <p class="text-danger">Warning: this action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="delete-all-data-btn">Delete all data</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="changeDisplaySettings" tabindex="-1" role="dialog"
    aria-labelledby="changeDisplaySettingsTitle" 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="changeDisplaySettingsLongTitle">Display settings</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="display-width" class="col-sm-3 col-form-label">Width</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-width">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-height" class="col-sm-3 col-form-label">Height</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-height">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-fps" class="col-sm-3 col-form-label">Refresh rate</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="display-fps">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="display-fullscreen" class="col-sm-3 col-form-label">Fullscreen</label>
                        <div class="form-check">
                            <select id="display-fullscreen" class="form-control">
                                <option>true</option>
                                <option>false</option>
                            </select>
                        </div>
                    </div>
                </form>

                You will need to restart the app for changes to take effect.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="display-settings-btn">Save changes</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addExperimenter" tabindex="-1" role="dialog"
    aria-labelledby="addExperimenterTitle" 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="addExperimenterLongTitle">Add experimenter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-experimenter-form">
                    <div class="form-group row align-items-center">
                        <label for="new-experimenter-name" class="col-sm-5 col-form-label">Experimenter name<sup>*</sup><br>(first and last name)</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-experimenter-name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-laboratory-name" class="col-sm-5 col-form-label">Laboratory name<sup>*</sup></label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-laboratory-name" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="new-institution-name" class="col-sm-5 col-form-label">Institution name<sup>*</sup></label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="new-institution-name" required>
                        </div>
                    </div>
                </form>

                <sup>*</sup> Indicates a required field.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add-experimenter-btn">Save experimenter</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteExperimenterData" tabindex="-1" role="dialog" aria-labelledby="deleteExperimenterDataTitle"
    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="deleteExperimenterDataLongTitle">Delete animal profile data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Deleting experimenter profile data will remove all metadata Visiomode holds on experimenters.</p>
                <p>Session data will not be affected.</p>
                <p class="text-danger">Warning: this action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="delete-experimenter-data-btn">Delete experimenter profile data</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addAnimal" tabindex="-1" role="dialog"
    aria-labelledby="addAnimalTitle" 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="addAnimalLongTitle">Add animal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label for="animal-id" class="col-sm-3 col-form-label">Animal ID<sup>*</sup></label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="animal-id" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-dob" class="col-sm-3 col-form-label">Date of Birth<sup>*</sup></label>
                        <div class="col-sm-5">
                            <input type="date" class="form-control" id="animal-dob" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-sex" class="col-sm-3 col-form-label">Sex<sup>*</sup></label>
                        <div class="col-sm-5">
                            <select id="animal-sex" class="custom-select form-control" required>
                                <option value="U">Unknown</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                                <option value="O">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-species" class="col-sm-3 col-form-label">Species<sup>*</sup></label>
                        <div class="col-sm-5">
                            <select class="custom-select form-control" id="animal-species" required>
                                <option>Mus musculus</option>
                                <option>Rattus norvegicus</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-genotype" class="col-sm-3 col-form-label">Genotype</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="animal-genotype">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-description" class="col-sm-3 col-form-label">Description</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="animal-description"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="animal-rfid" class="col-sm-3 col-form-label">RFID</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="animal-rfid"></textarea>
                        </div>
                    </div>
                </form>

                <sup>*</sup> Indicates a required field.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add-animal-btn">Save animal</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteAnimalData" tabindex="-1" role="dialog" aria-labelledby="deleteAnimalDataTitle"
    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="deleteAnimalDataLongTitle">Delete animal profile data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Deleting animal profile data will remove all metadata Visiomode holds on experimental animals.</p>
                <p>Session data will not be affected.</p>
                <p class="text-danger">Warning: this action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="delete-animal-data-btn">Delete animal profile data</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script type="text/javascript" src="static/js/settings.js"></script>
{% endblock %}
