{% extends "base.html" %}

{% block title %}Instrument #{{ instrument.id }}: {{ instrument.name }} — {{ service_name }}{% endblock %}

{% block content %}
  <h1>{{ instrument.name }}</h1>
  {% if instrument.is_hidden %}
  <p class="text-muted"><i class="fa fa-eye-slash" aria-hidden="true"></i> This instrument has been hidden from instrument lists.</p>
  {% endif %}
  {% if instrument.description_as_html or instrument.description %}
  <div class="instrument-user-content">
  {% if instrument.description_as_html %}{{ instrument.description_as_html | safe }}{% else %}<p>{{ instrument.description }}</p>{% endif %}
  </div>
  {% endif %}
  {% include "instruments/instrument_scientists.html" %}
  {% if not current_user.is_readonly %}
  {% if current_user.is_admin or current_user in instrument.responsible_users %}
    <a href="{{ url_for('.edit_instrument', instrument_id=instrument.id) }}" class="btn btn-default">Edit Instrument</a>
  {% endif %}
  {% endif %}
  <h2>Actions</h2>
  {% for action in instrument.actions %}
    {% if not action.is_hidden or current_user.is_admin %}
    <h3><a href="{{ url_for('.action', action_id=action.id) }}" title="{{ action.name }}">{{ action.name }}</a></h3>
    {% if action.description_as_html %}{{ action.description_as_html | safe }}{% else %}<p>{{ action.description }}</p>{% endif %}
    <a href="{{ url_for('.objects', action=action.id) }}" class="btn btn-default">{{ action.type.view_text }}</a>
    {% if not current_user.is_readonly %}
    <a href="{{ url_for('.new_object', action_id=action.id) }}" class="btn btn-primary">{{ action.type.perform_text }}</a>
    {% endif %}
    {% endif %}
  {% endfor %}
  {% if is_instrument_responsible_user %}
  <h2>Instrument Scientist Notes</h2>
    <p class="text-muted">
      These notes are only visible to the instrument scientists.
      <a href="https://scientific-it-systems.iffgit.fz-juelich.de/SampleDB/user_guide/instruments.html#instrument-scientist-notes">Read more.</a>
    </p>
    {% if instrument.notes_as_html or instrument.notes %}
      <div class="instrument-user-content">
      {% if instrument.notes_as_html %}{{ instrument.notes_as_html | safe }}{% else %}<p>{{ instrument.notes }}</p>{% endif %}
      </div>
    {% else %}
      &mdash;
    {% endif %}
  {% endif %}
  {% if is_instrument_responsible_user or instrument.users_can_create_log_entries or instrument.users_can_view_log_entries %}
    <h2>Instrument Log</h2>
    <p class="text-muted">
      {% if is_instrument_responsible_user %}
        Instrument scientists can use the instrument log to keep track of problems, maintenance or other events.
        Instrument scientists can  <a href="{{ url_for('.edit_instrument', instrument_id=instrument.id) }}">edit the instrument settings</a> to configure whether users can create or view log entries.
        {% if instrument.users_can_view_log_entries and instrument.users_can_create_log_entries %}
          Currently, users can create and view log entries.
        {% elif instrument.users_can_create_log_entries %}
          Currently, users cannot view log entries, but they can create new entries.
        {% elif instrument.users_can_view_log_entries %}
          Currently, users can view log entries, but they cannot create new entries.
        {% else %}
          Currently, users can neither create nor view log entries.
        {% endif %}
      {% else %}
        {% if instrument.users_can_view_log_entries %}
          Instrument scientists can use the instrument log to keep track of problems, maintenance or other events.
        {% endif %}
        {% if instrument.users_can_create_log_entries %}
          Users can create entries in the instrument log to notify instrument scientists about any issues they encounter.
        {% endif %}
      {% endif %}
      <a href="https://scientific-it-systems.iffgit.fz-juelich.de/SampleDB/user_guide/instruments.html#instrument-log">Read more.</a>
    </p>
    {% if is_instrument_responsible_user or instrument.users_can_view_log_entries %}
      {% if instrument_log_entries %}
        <div style="margin-bottom: 10px;" class="row">
          <div class="col-md-6">
          {% if not current_user.is_readonly and (is_instrument_responsible_user or instrument.users_can_create_log_entries) %}
            <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#newLogEntryModal" style="height:32px">
              <i class="fa fa-comment-o fa-fw"></i> Create Log Entry
            </button>
            <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#mobileFileLinkModal" style="height:32px">
              <i class="fa fa-mobile-phone fa-fw"></i> Smartphone Upload as Log Entry
            </button>
          {% endif %}
          </div>
          <div class="text-right col-md-6">
          <button type="button" class="btn btn-sm btn-primary" style="height:32px" id="button-switch-instrument-log-order">
            Sort by date
            {% if instrument_log_order_ascending %}
            <i class="fa fa-sort-asc"></i>
            {% else %}
            <i class="fa fa-sort-desc"></i>
            {% endif %}
          </button>
          <form class="hidden" id="form-instrument-log-order">
            {{ instrument_log_order_form.hidden_tag() }}
            <input type="checkbox" name="{{ instrument_log_order_form.ascending.name }}" />
          </form>
          <button type="button" class="btn btn-sm btn-primary" style="height:32px" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content="
            {% for category in instrument_log_categories %}
              <label style='font-weight:400'><input type='checkbox' id='instrument_log_filter_{{ category.id }}' onclick='update_instrument_log_filter_states();'/> {{ category.title }}</label><br />
            {% endfor %}
              <label style='font-weight:400'><input type='checkbox' id='instrument_log_filter_none' onclick='update_instrument_log_filter_states();'/> Uncategorized</label><br />
              <hr />
              <div class='input-group date'>
                  <input type='text' class='form-control' id='input-instrument-log-filter-date'/>
                  <span class='input-group-addon'>
                      <span class='glyphicon glyphicon-calendar'></span>
                  </span>
              </div>
              <script>
                setup_instrument_log_filter_states();
              </script>
            ">
              <i class="fa fa-filter" style="font-size: 1.5rem"></i> <span class="badge" id="instrument_log_counter"></span>
            </button>
            </div>
          </div>
        <div id="instrument-log-container">
        {% for log_entry in instrument_log_entries %}
          <div>
          <input type="checkbox" id="instrument-log-show-versions-{{ log_entry.id }}" class="instrument-log-show-versions"/>
          <div class="well instrument-log-entry {% if log_entry.versions[-1].categories %}instrument-log-entry-{{ log_entry.versions[-1].categories[-1].theme.name.lower() }}{% endif %}" {% if log_entry.versions[-1].categories %}{% for category in log_entry.versions[-1].categories %}data-instrument-log-category-{{ category.id }}="yes" {% endfor %}{% else %}data-instrument-log-category-none="yes"{% endif %} id="log_entry-{{ log_entry.id }}" data-instrument-log-date="{{ log_entry.versions[0].utc_datetime.strftime("%Y-%m") }}" style="position: relative">
            <div class="instrument-log-categories">
              {% for category in log_entry.versions[-1].categories %}
                  <span class="instrument-log-category-{{ category.theme.name.lower() }}">{{ category.title }}</span>
              {% endfor %}
            </div>
            {% if log_entry.versions[-1].content %}
            <pre class="comment">{{ log_entry.versions[-1].content }}</pre>
            {% else %}
              &mdash;
            {% endif %}
            <div class="text-right">&mdash; <a href="{{ url_for('frontend.user_profile', user_id=log_entry.author.id) }}">{{ log_entry.author.name }}</a>, {% if log_entry.versions | length > 1 %}{{ log_entry.versions[0].utc_datetime.strftime('%Y-%m-%d %H:%M:%S') }} &ndash; {{ log_entry.versions[-1].utc_datetime.strftime('%Y-%m-%d %H:%M:%S') }}{% else %}{{ log_entry.versions[-1].utc_datetime.strftime('%Y-%m-%d %H:%M:%S') }}{% endif %}</div>
            {% if log_entry.versions[:-1] %}
              <div class="text-right"><label for="instrument-log-show-versions-{{ log_entry.id }}" class="instrument-log-show-versions">previous versions</label>{% if log_entry.user_id == current_user.id and not current_user.is_readonly %}&nbsp;/&nbsp;<span class="instrument-log-show-edit" data-toggle="modal" data-target="#logEntryContentModal_{{ log_entry.id }}">Edit log entry</span>{% endif %}</div>
              {% for version in log_entry.versions[:-1] | reverse %}
                <div class="instrument-log-version">
                  <hr />
                  {% if version.content %}
                  <pre class="comment text-muted">{{ version.content }}</pre>
                  {% else %}
                    &mdash;
                  {% endif %}
                  <div class="text-right text-muted">{{ version.utc_datetime.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                </div>
              {% endfor %}
            {% elif log_entry.user_id == current_user.id and not current_user.is_readonly %}
              <div class="text-right"><span class="instrument-log-show-edit" data-toggle="modal" data-target="#logEntryContentModal_{{ log_entry.id }}">Edit log entry</span></div>
            {% endif %}
          {% if log_entry.file_attachments or log_entry.object_attachments %}
              <hr />
          {% endif %}
          {% set file_attachments = log_entry.file_attachments %}
          {% if file_attachments %}
            <div class="file-attachment-header">Attached Files:</div>
            <ul class="file-attachment-list">
            {% with hidden_file_attachments = [] %}
            {% for file_attachment in file_attachments %}{% if not file_attachment.is_hidden %}<li>
                  {% if file_attachment | attachment_is_image %}
                  <span class="file-attachment-preview">
                    <img src="{{ url_for('.instrument_log_file_attachment', instrument_id=instrument.id, log_entry_id=log_entry.id, file_attachment_id=file_attachment.id, preview=1) }}" alt="&#xf15b;" class="show-fullscreen-image-preview" />
                    <span class="fullscreen-image-preview">
                      <span class="close-fullscreen-image-preview"><i class="fa fa-close fa-fw"></i></span>
                      <a href="{{ url_for('.instrument_log_file_attachment', instrument_id=instrument.id, log_entry_id=log_entry.id, file_attachment_id=file_attachment.id) }}">
                        <span class="download-fullscreen-image-preview"><i class="fa fa-download fa-fw"></i></span>
                      </a>
                      <img src="{{ url_for('.instrument_log_file_attachment', instrument_id=instrument.id, log_entry_id=log_entry.id, file_attachment_id=file_attachment.id) }}" alt="Fullscreen Image Preview">
                    </span>
                    <a href="{{ url_for('.instrument_log_file_attachment', instrument_id=instrument.id, log_entry_id=log_entry.id, file_attachment_id=file_attachment.id) }}">
                  </span>
                  {% else %}
                  <a href="{{ url_for('.instrument_log_file_attachment', instrument_id=instrument.id, log_entry_id=log_entry.id, file_attachment_id=file_attachment.id) }}">
                    <span class="file-attachment-preview">
                      <i class="fa fa-file"></i>
                    </span>
                  {% endif %}
                    <span>{{ file_attachment.file_name }}</span></a></li>
            {% else %}{{ hidden_file_attachments.append(file_attachment) or '' }}{% endif %}{% endfor %}
            {% if hidden_file_attachments %}
              <li>{{ hidden_file_attachments | length }} hidden file{% if hidden_file_attachments | length > 1 %}s{% endif %}</li>
            {% endif %}
            {% endwith %}
            </ul>
          {% endif %}
          {% set object_attachments = log_entry.object_attachments %}
          {% if object_attachments %}
            <div class="object-attachment-header">Attached Objects:</div>
            <ul class="object-attachment-list">
            {% with hidden_object_attachments = [] %}
            {% for object_attachment in object_attachments %}{% if not object_attachment.is_hidden %}<li>
                <a href="{{ url_for('.object', object_id=object_attachment.object_id) }}">{{ attached_object_names.get(object_attachment.object_id, 'Object') }} (#{{ object_attachment.object_id }})</a></li>
            {% else %}{{ hidden_object_attachments.append(object_attachment) or '' }}{% endif %}{% endfor %}
            {% if hidden_object_attachments %}
              <li>{{ hidden_object_attachments | length }} hidden object{% if hidden_object_attachments | length > 1 %}s{% endif %}</li>
            {% endif %}
            {% endwith %}
            </ul>
          {% endif %}
          </div>
          {% if not current_user.is_readonly and log_entry.user_id == current_user.id %}
            <div class="modal fade" id="logEntryContentModal_{{ log_entry.id }}" tabindex="-1" role="dialog" aria-labelledby="logEntryContentModalLabel_{{ log_entry.id }}">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="logEntryContentModalLabel_{{ log_entry.id }}">Edit Log Entry</h4>
                </div>
                <form method="post" enctype="multipart/form-data">
                <div class="modal-body">
                  {{ instrument_log_entry_form.csrf_token }}
                  <input type="hidden" name="{{ instrument_log_entry_form.log_entry_id.name }}" value="{{ log_entry.id }}" />
                  <div class="form-group">
                    <label for="textarea-log-entry-text-{{ log_entry.id }}">Edit content</label>
                    <textarea class="form-control" id="textarea-log-entry-text-{{ log_entry.id }}" rows="3" placeholder="Instrument Log Entry" style="resize:vertical; min-height:2.5em; margin-bottom: 10px;" name="{{ instrument_log_entry_form.content.name }}">{{ log_entry.versions[-1].content or '' }}</textarea>
                  </div>
                  <label for="input-file-upload-{{ log_entry.id }}">Add file attachments</label>
                 <div class="input-group" id="upload-area-{{ log_entry.id }}">
                    <span class="input-group-addon"><i class="fa fa-file"></i></span>
                    <input id="input-file-text-{{ log_entry.id }}" type="text" class="form-control disabled" disabled placeholder="No files selected" />
                    <div class="input-group-btn">
                      <label class="btn btn-primary" style="width: 10em;"><i class="fa fa-folder-open"></i>Browse...<input id="input-file-upload-{{ log_entry.id }}" type="file" name="{{ instrument_log_entry_form.files.name }}" multiple style="display: none;"></label>
                    </div>
                  </div>
                  {% if instrument_log_entry_form.objects.choices or config["LOAD_OBJECTS_IN_BACKGROUND"] %}
                  <div class="form-group" style="margin: 15px 0" id="wrapper-object-attachments-{{ log_entry.id }}">
                    <label for="select-object-attachments-{{ log_entry.id }}">Add object attachments</label>
                    <select id="select-object-attachments-{{ log_entry.id }}" name="{{ instrument_log_entry_form.objects.name }}" class="selectpicker" multiple="multiple" data-live-search="true" data-none-selected-text="No objects selected" data-width="100%" data-sampledb-required-perm="1" data-sampledb-remove="{% for object_attachment in log_entry.object_attachments %}{% if not object_attachment.is_hidden%}{{ object_attachment.object_id }},{% endif %}{% endfor %}-1" data-sampledb-empty-hide="#wrapper-object-attachments-{{ log_entry.id }}">
                      {% for choice in instrument_log_entry_form.objects.choices %}
                        {% set ns = namespace(found=False) %}
                        {% for object_attachment in log_entry.object_attachments %}
                          {% if object_attachment.object_id | string == choice[0] and not object_attachment.is_hidden%}
                            {% set ns.found = True %}
                          {% endif %}
                        {% endfor %}
                        {% if not ns.found %}
                        <option value="{{ choice[0] }}">{{ choice[1] }}</option>
                        {% endif %}
                      {% endfor %}
                    </select>
                  </div>
                  {% endif %}
                  {% if instrument_log_entry_form.categories.choices %}
                  <div class="form-group" style="margin: 15px 0">
                    <label for="select-categories-{{ log_entry.id }}">Edit categories</label>
                    <select id="select-categories-{{ log_entry.id }}" name="{{ instrument_log_entry_form.categories.name }}" class="selectpicker" multiple="multiple" data-none-selected-text="No categories selected" data-width="100%">
                      {% for choice in instrument_log_entry_form.categories.choices %}
                        <option value="{{ choice[0] }}" {% for category in log_entry.versions[-1].categories %}{% if category.id | string == choice[0] %}selected="selected"{% endif %}{% endfor %}>{{ choice[1] }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  {% endif %}

                {% if log_entry.file_attachments or log_entry.object_attachments %}
                  <hr />
                    <p class="text-muted">You can hide a file or object, if it was attached erroneously.</p>

                  {% if log_entry.file_attachments %}
                  <div class="form-group" style="margin: 15px 0">
                    <label for="select-existing-file-attachments-{{ log_entry.id }}">Hide file attachments</label>
                    <select id="select-existing-file-attachments-{{ log_entry.id }}" name="{{ instrument_log_entry_form.existing_files.name }}" class="selectpicker" multiple="multiple" data-none-selected-text="No attached files selected" data-width="100%">
                      {% for file_attachment in log_entry.file_attachments %}
                        <option value="{{ file_attachment.id }}">{{ file_attachment.file_name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  {% endif %}

                  {% if log_entry.object_attachments %}
                  <div class="form-group" style="margin: 15px 0">
                    <label for="select-existing-object-attachments-{{ log_entry.id }}">Hide object attachments</label>
                    <select id="select-existing-object-attachments-{{ log_entry.id }}" name="{{ instrument_log_entry_form.existing_objects.name }}" class="selectpicker" multiple="multiple" data-none-selected-text="No attached objects selected" data-width="100%">
                      {% for object_attachment in log_entry.object_attachments %}
                        <option value="{{ object_attachment.id }}">{{ attached_object_names.get(object_attachment.object_id, 'Object') }} (#{{ object_attachment.object_id }})</option>
                      {% endfor %}
                    </select>
                  </div>
                  {% endif %}
                {% endif %}

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="submit" name="action_edit_content" class="btn btn-primary">Save changes</button>
                </div>
                </form>
              </div>
            </div>
          </div>
          {% endif %}
          </div>
        {% endfor %}
        </div>
      {% else %}
        <p class="text-muted">There are no log entries for this instrument.</p>
        {% if not current_user.is_readonly and (is_instrument_responsible_user or instrument.users_can_create_log_entries) %}
          <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#newLogEntryModal" style="height:32px">
            <i class="fa fa-comment-o fa-fw"></i> Create Log Entry
          </button>
          <button type="button" class="btn btn-sm btn-default" data-toggle="modal" data-target="#mobileFileLinkModal" style="height:32px">
            <i class="fa fa-mobile-phone fa-fw"></i> Smartphone Upload as Log Entry
          </button>
        {% endif %}
      {% endif %}
    {% endif %}
    {% if not current_user.is_readonly and (is_instrument_responsible_user or instrument.users_can_create_log_entries) %}

    {% set log_entry_text_missing = [] %}
    {% for message in get_flashed_messages() %}
      {% if 'Please enter a log entry text' in message %}
        {{ log_entry_text_missing.append(True) or '' }}
      {% endif %}
    {% endfor %}
      <div class="modal fade" id="newLogEntryModal" tabindex="-1" role="dialog" aria-labelledby="newLogEntryModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <form class="form" method="post" id="new_instrument_log_entry_form" enctype="multipart/form-data">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="newLogEntryModalLabel">Create Log Entry</h4>
              </div>
              <div class="modal-body">
                {{ instrument_log_entry_form.csrf_token }}
                <div class="form-group {% if log_entry_text_missing %}has-error{% endif %}">
                  <label for="textarea-log-entry-text" class="control-label">Content</label>
                  <textarea class="form-control" id="textarea-log-entry-text" rows="3" placeholder="Instrument Log Entry" style="resize:vertical; min-height:2.5em; margin-bottom: 10px;" name="{{ instrument_log_entry_form.content.name }}"></textarea>
                  {% if log_entry_text_missing %}
                    <span class="help-block">Please enter a text or add an attachment.</span>
                  {% endif %}
                </div>
                <label for="input-file-upload">Add file attachments</label>
                <div class="input-group" id="upload-area">
                  <span class="input-group-addon"><i class="fa fa-file"></i></span>
                  <input id="input-file-text" type="text" class="form-control disabled" disabled placeholder="No files selected" />
                  <div class="input-group-btn">
                    <label class="btn btn-primary" style="width: 10em;"><i class="fa fa-folder-open"></i>Browse...<input id="input-file-upload" type="file" name="{{ instrument_log_entry_form.files.name }}" multiple style="display: none;"></label>
                  </div>
                </div>
                {% if instrument_log_entry_form.objects.choices or config["LOAD_OBJECTS_IN_BACKGROUND"]%}
                <div class="form-group" style="margin: 15px 0" id="wrapper-object-attachments-new">
                  <label for="select-object-attachments">Add object attachments</label>
                  <select id="select-object-attachments" name="{{ instrument_log_entry_form.objects.name }}" class="selectpicker" multiple="multiple" data-live-search="true" data-none-selected-text="No objects selected" data-width="100%" data-sampledb-required-perm="1" data-sampledb-remove="-1" data-sampledb-empty-hide="#wrapper-object-attachments-new">
                    {% for choice in instrument_log_entry_form.objects.choices %}
                      <option value="{{ choice[0] }}">{{ choice[1] }}</option>
                    {% endfor %}
                  </select>
                </div>
                {% endif %}
                {% if instrument_log_entry_form.categories.choices %}
                <div class="form-group" style="margin: 15px 0">
                  <label for="select-categories">Add categories</label>
                  <select id="select-categories" name="{{ instrument_log_entry_form.categories.name }}" class="selectpicker" multiple="multiple" data-none-selected-text="No categories selected" data-width="100%">
                    {% for choice in instrument_log_entry_form.categories.choices %}
                      <option value="{{ choice[0] }}">{{ choice[1] }}</option>
                    {% endfor %}
                  </select>
                </div>
                {% endif %}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary">Create log entry</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    {% endif %}
  {% endif %}

  {% if mobile_upload_qrcode and mobile_upload_url%}
    <div class="modal fade" id="mobileFileLinkModal" tabindex="-1" role="dialog" aria-labelledby="mobileFileLinkModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="mobileFileLinkModalLabel">Mobile File Upload</h4>
          </div>
          <div class="modal-body">
            <p class="text-center">To upload files from mobile devices, scan this QR code:</p>
            <a href="{{ mobile_upload_url }}"><img src="{{ mobile_upload_qrcode }}" alt="{{ mobile_upload_url }}" style="width: 100%"/></a>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block stylesheets %}
  {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-select.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-toggle.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-datetimepicker.min.css') }}" />
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ url_for('static', filename='js/markdown_image_viewer.js') }}"></script>
  <script src="{{ url_for('static', filename='js/moment-with-locales.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap-datetimepicker.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap-select.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap-toggle.min.js') }}"></script>
  {% if config['LOAD_OBJECTS_IN_BACKGROUND'] %}
    <script src="{{ url_for('static', filename='js/sampledb-load-objects.js') }}"></script>
  {% endif %}
  <script type="text/javascript">
    window.categoriesShown = {
      {% for category in instrument_log_categories %}
      '{{ category.id }}': true,
      {% endfor %}
      'none': true
    };
    window.filterDate = null;
    function setup_instrument_log_filter_states() {
      {% for category in instrument_log_categories %}
      $('#instrument_log_filter_{{ category.id }}').prop('checked', window.categoriesShown['{{ category.id }}']);
      {% endfor %}
      $('#instrument_log_filter_none').prop('checked', window.categoriesShown['none']);
      $('#instrument_log_counter').html($('.instrument-log-entry:not(:hidden)').length.toString()+ " / " + $('.instrument-log-entry').length.toString());
        $('.input-group.date').each(function() {
          var datetimepicker = $(this).datetimepicker({
            date: window.filterDate,
            format: 'YYYY-MM',
            showClear: true,
            showClose: true,
            maxDate: moment(new Date())
          });
          datetimepicker.on('dp.change', function() {
            update_instrument_log_filter_states();
          });
          $('#input-instrument-log-filter-date').on('click', function() {
            datetimepicker.data("DateTimePicker").toggle();
          });
        });
    }
    function update_instrument_log_filter_states() {
      var filter_date = $('#input-instrument-log-filter-date').val();
      if (filter_date === "") {
        window.filterDate = null;
      } else {
        window.filterDate = filter_date
      }
      $('.instrument-log-entry').hide();
      {% for category in instrument_log_categories %}
        window.categoriesShown['{{ category.id }}'] = $('#instrument_log_filter_{{ category.id }}').prop('checked');
        if (window.categoriesShown['{{ category.id }}']) {
          if (filter_date !== "") {
            $('div[data-instrument-log-category-{{ category.id }}="yes"][data-instrument-log-date='+filter_date+']').show();
          } else {
            $('div[data-instrument-log-category-{{ category.id }}="yes"]').show();
          }
        }
      {% endfor %}
      window.categoriesShown['none'] = $('#instrument_log_filter_none').prop('checked');
      if (window.categoriesShown['none']) {
        if (filter_date !== "") {
          $('div[data-instrument-log-category-none="yes"][data-instrument-log-date='+filter_date+']').show();
        } else {
          $('div[data-instrument-log-category-none="yes"]').show();
        }
      }
      $('#instrument_log_counter').html($('.instrument-log-entry:not(:hidden)').length.toString()+ " / " + $('.instrument-log-entry').length.toString());
    }
    $(function () {
      setup_instrument_log_filter_states();
      $('[data-toggle="popover"]').popover();
      {% if instrument_log_entries %}
      {% for log_entry in instrument_log_entries %}
        {% if not current_user.is_readonly and (current_user.id == log_entry.user_id) %}
        function changeHandler{{ log_entry.id }}() {
          var files =  $('#input-file-upload-{{ log_entry.id }}').get(0).files;
          if (files.length === 0) {
            $('#input-file-text-{{ log_entry.id }}').val("");
          } else if (files.length === 1) {
            $('#input-file-text-{{ log_entry.id }}').val(files[0].name);
          } else {
            $('#input-file-text-{{ log_entry.id }}').val(files.length + " files selected");
          }
        }
        $('#input-file-upload-{{ log_entry.id }}').on('change', changeHandler{{ log_entry.id }});
        function dropHandler{{ log_entry.id }}(e) {
          e.preventDefault();
          $('#input-file-upload-{{ log_entry.id }}')[0].files = e.dataTransfer.files;
          changeHandler{{ log_entry.id }}();
        }
        function dragOverHandler{{ log_entry.id }}(e) {
          e.preventDefault();
        }
        var upload_area = $('#upload-area-{{ log_entry.id }}')[0];
        upload_area.ondrop = dropHandler{{ log_entry.id }};
        upload_area.ondragover = dragOverHandler{{ log_entry.id }};
        {% endif %}
      {% endfor %}
      {% endif %}
      function changeHandler() {
        var files =  $('#input-file-upload').get(0).files;
        if (files.length === 0) {
          $('#input-file-text').val("");
        } else if (files.length === 1) {
          $('#input-file-text').val(files[0].name);
        } else {
          $('#input-file-text').val(files.length + " files selected");
        }
      }
      {% if not current_user.is_readonly and (is_instrument_responsible_user or instrument.users_can_create_log_entries) %}
      $('#input-file-upload').on('change', changeHandler);
      function dropHandler(e) {
        e.preventDefault();
        $('#input-file-upload')[0].files = e.dataTransfer.files;
        changeHandler();
      }
      function dragOverHandler(e) {
        e.preventDefault();
      }
      var upload_area = $('#upload-area')[0];
      upload_area.ondrop = dropHandler;
      upload_area.ondragover = dragOverHandler;
      {% endif %}
      var log_order_button = $('#button-switch-instrument-log-order');
      log_order_button.on('click', function () {
        log_order_button.find('i').toggleClass('fa-sort-asc').toggleClass('fa-sort-desc');
        var c = $('#instrument-log-container');
        c.children().each(function (i, e) {
          c.prepend(e);
        });
        var form = $('#form-instrument-log-order');
        var ascending = (log_order_button.find('i.fa-sort-asc').length !== 0);
        form.find('input[type="checkbox"]').prop('checked', ascending);
        $.ajax({
          type: "POST",
          url: {{ url_for('.set_instrument_log_order') | tojson }},
          data: form.serialize()
        });
      });

      {% set log_entry_text_missing = [] %}
      {% for message in get_flashed_messages() %}
        {% if 'Please enter a log entry text' in message %}
          {{ log_entry_text_missing.append(True) or '' }}
        {% endif %}
      {% endfor %}
      {% if log_entry_text_missing %}
      $('#newLogEntryModal').modal({'show': true});
      {% endif %}
    });
  </script>
{% endblock %}