{% extends 'products/base.html' %}
{% load cache %}

{% block title %}
    AI for radiology
{% endblock %}

{% block content %}
  <div class="d-flex justify-content-between align-items-center">
    <h1>Products</h1>
  </div>
    <p> Find the artificial intelligence based software for radiology that you are looking for. <br>
        All products listed are available for the European market (CE marked).</p>

  <div class="d-flex">

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">Subspeciality:</div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownSubspec" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
          {{ selected_subspeciality }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for subspec in subspecialities %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ subspec }}&modality={{ selected_modality }}&ce_under={{ selected_ce_under }}&ce_class={{ selected_ce_class }}&fda_class={{ selected_fda_class }}&sort_by={{ selected_sort_by }}&search={{ q_search }}">{{ subspec }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">Modality:</div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownModality" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ selected_modality }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for modality in modalities %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ selected_subspeciality }}&modality={{ modality }}&ce_under={{ selected_ce_under }}&ce_class={{ selected_ce_class }}&fda_class={{ selected_fda_class }}&sort_by={{ selected_sort_by }}&search={{ q_search }}">{{ modality }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">CE:<sup><i class="fas fa-info-circle text-radboud" data-toggle="tooltip" title={% include "products/partials/tooltip_CE_MDD_MDR_general.html" %}></i></sup></div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownCE" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ selected_ce_under }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for ce_under in ce_mdd_mdr %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ selected_subspeciality }}&modality={{ selected_modality }}&ce_under={{ ce_under }}&ce_class={{ selected_ce_class }}&fda_class={{ selected_fda_class }}&sort_by={{ selected_sort_by }}&search={{ q_search }}">{{ ce_under }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">CE class:<sup><i class="fas fa-info-circle text-radboud" data-toggle="tooltip" title={% include "products/partials/tooltip_CE.html" %}></i></sup></div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownCE" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ selected_ce_class }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for ce_class in ce_classes %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ selected_subspeciality }}&modality={{ selected_modality }}&ce_under={{ selected_ce_under }}&ce_class={{ ce_class }}&fda_class={{ selected_fda_class }}&sort_by={{ selected_sort_by }}&search={{ q_search }}">{{ ce_class }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">FDA class:<sup><i class="fas fa-info-circle text-radboud" data-toggle="tooltip" title={% include "products/partials/tooltip_FDA.html" %}></i></sup></div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownFDA" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ selected_fda_class }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for fda_class in fda_classes %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ selected_subspeciality }}&modality={{ selected_modality }}&ce_under={{ selected_ce_under }}&ce_class={{ selected_ce_class }}&fda_class={{ fda_class }}&sort_by={{ selected_sort_by }}&search={{ q_search }}">{{ fda_class }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="p-2 align-self-end">
      <div class="dropdown">
        <div class="h6 text-muted">Sort by:</div>
        <button class="btn btn-light btn-square dropdown-toggle" type="button" id="dropdownSortby" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{ selected_sort_by }}
        </button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          {% for sort_by in sort_bys %}
            <a class="dropdown-item " href="{% url 'products:product-list' %}?subspeciality={{ selected_subspeciality }}&modality={{ selected_modality }}&ce_under={{ selected_ce_under }}&ce_class={{ selected_ce_class }}&fda_class={{ selected_fda_class }}&sort_by={{ sort_by }}&search={{ q_search }}">{{ sort_by }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="ml-auto p-2 align-self-end">
      <form action="" method="GET">
        <div class="form-row justify-content-end">
          <div class="col-auto">
            <input hidden name="subspeciality" value="{{ selected_subspeciality }}">
            <input hidden name="modality" value="{{ selected_modality }}">
            <input hidden name="ce_under" value="{{ selected_ce_under }}">
            <input hidden name="ce_class" value="{{ selected_ce_class }}">
            <input hidden name="fda_class" value="{{ selected_fda_class }}">
            <input hidden name="sort_by" value="{{ selected_sort_by }}">
            <input class="form-control" name="search" type="text" placeholder="Search..." value={{ q_search }} >
          </div>
          <div class="col-auto">
            <input type="submit" class="btn btn-dark btn-square" value="Search">
          </div>
        </div>
      </form>
    </div>

  </div>


    <div>
      <p class="text-right text-muted">
        {{product_total}}/{{product_total_all}} results
      </p>
    </div>

  {% cache 3600 product_list request.META.QUERY_STRING %}
    {% include "products/partials/product_list.html" %}
  {% endcache %}

{% endblock %}