{% extends "base.html" %}

{% block title %}{{ _("Instruments") }} — {{ service_name }}{% endblock %}

{% block content %}
  <h1>{{ _('Instruments') }}</h1>
  {% if filter_topic_infos %}
    <ul>
    {% if filter_topic_infos %}
      <li>
        {% if filter_topic_infos | length == 1 %}
          {{ _('for topic:') }}
        {% else %}
          {{ _('for topics:') }}
        {% endif %}
        {% for topic_info in filter_topic_infos %}
          <a href="{{ topic_info.url }}">{{ topic_info.name }}</a>{% if loop.index + 1 < filter_topic_infos | length %},{% elif loop.index + 1 == filter_topic_infos | length %} {{ _('or') }} {% endif %}
        {% endfor %}
      </li>
    {% endif %}
    </ul>
  {% endif %}
  <p class="text-muted">{{ _('Instruments in %(service_name)s map real instruments to <a href="%(actions_url)s">actions</a> performed with them.', service_name=service_name, actions_url=url_for('.actions')) }} <a href="https://scientific-it-systems.iffgit.fz-juelich.de/SampleDB/user_guide/instruments.html">{{ _('Read more.') }}</a></p>

  {% if current_user.is_admin and not current_user.is_readonly %}
    <a href="{{ url_for('.new_instrument', topic_ids=filter_topic_ids | join(',') or None) }}" class="btn btn-default">{{ _('Create Instrument') }}</a>
  {% endif %}
  {% if not config['DISABLE_TOPICS'] and topics %}
    <a class="btn btn-default" data-toggle="modal" data-target="#filtersModal">
      {{ _('Filters') }}
    </a>

    <div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-labelledby="filtersModalLabel">
      <div class="modal-dialog" role="document">
        <form method="get" class="form">
          {% for key in request.args %}
            {% if key not in ['instrument_list_filters', 'topic_ids'] %}
              {% for value in request.args.getlist(key) %}
                <input type="hidden" name="{{ key }}" value="{{ value }}" />
              {% endfor %}
            {% endif %}
          {% endfor %}
          <input type="hidden" name="instrument_list_filters" value="" />
          <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="filtersModalLabel">{{ _('Filters') }}</h4>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="input-topics" class="control-label">{{ _('Filter by Topics') }}</label>
                <select class="selectpicker form-control" id="input-topics" name="topic_ids" data-none-selected-text="{{ _('No topic selected') }}" multiple>
                  {% for topic in topics %}
                  <option value="{{ topic.id }}"{% if topic.id in filter_topic_ids %}selected="selected"{% endif %}>{{ topic.name | get_translated_text }}</option>
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-default" name="save_default_instrument_filters" formmethod="post">{{ _('Save') }}</button>
              <button type="submit" class="btn btn-default" name="clear_default_instrument_filters" formmethod="post">{{ _('Clear') }}</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Close') }}</button>
              <button type="submit" class="btn btn-primary">{{ _('Apply') }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  {% endif %}
  {% for instrument in instruments %}
    <h2>
      <a href="{{ url_for('.instrument', instrument_id=instrument.id) }}" title="{{ instrument.name | get_translated_text(default=_('Unnamed Instrument')) }}">{{ instrument.name | get_translated_text(default=_('Unnamed Instrument')) }}</a>
      {{ import_information_symbol(instrument) }}
      {% if instrument.id in user_favorite_instrument_ids or not current_user.is_readonly %}
        <button type="button" class="fa {% if instrument.id in user_favorite_instrument_ids %}fav-star-on{% else %}fav-star-off{% endif %}" value="" {% if not current_user.is_readonly %}data-instrument-id="{{ instrument.id }}"{% endif %}></button>
      {% endif %}
    </h2>
    {% 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 not config['DISABLE_TOPICS'] and instrument.topics %}
      <p>
        {{ _('Topics') }}:
        {% for topic in instrument.topics %}
          <a class="badge badge-secondary" href="{{ url_for('.topic', topic_id=topic.id) }}">{{ topic.name | get_translated_text }}</a>
        {% endfor %}
      </p>
    {% endif %}
    {% if instrument.short_description | get_translated_text %}
      <div class="instrument-user-content">
      {% if instrument.short_description_is_markdown %}
        {{ instrument.short_description | get_translated_text | markdown_to_safe_html(anchor_prefix='instrument-short-description') | safe }}
      {% else %}<p class="multiline-text-wrapper">{{ instrument.short_description | get_translated_text }}</p>{% endif %}
      </div>
    {% endif %}
    {% if instrument.location is not none %}
      <div>
        <b>{{ _('Location') }}:</b> <a href="{{ url_for('.location', location_id=instrument.location_id) }}">{{ instrument.location | get_full_location_name(include_id=true) }}</a>
      </div>
    {% endif %}
    {% include "instruments/instrument_scientists.html" %}
  {% endfor %}
{% endblock %}

{% block stylesheets %}
  {{ super() }}
  <link rel="stylesheet" href="{{ fingerprinted_static('bootstrap-select/css/bootstrap-select.min.css') }}" />
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ fingerprinted_static('sampledb/js/markdown_image_viewer.js') }}" type="module"></script>
  <script src="{{ fingerprinted_static('sampledb/js/favorites.js') }}" type="module"></script>
  <script src="{{ fingerprinted_static('bootstrap-select/js/bootstrap-select.min.js') }}"></script>
{% endblock %}
