{% load static %}
{% load products_tags %}

<div class="container">
  {% for product in products %}
    <div class="row py-4 border-top">
      <div class="col-sm-3">
        <div class="d-flex justify-content-between flex-column h-100">
          <a href="{% url 'products:company-detail' slug=product.company.slug %}" title="{{product.company.company_name}}">
            {% if product.company.logo %}
              <img loading="lazy" src="{{ product.company.logo.url }}" alt="Logo" style="width:70%">
            {% endif %}
          </a>
          <div class="h6">
            <span class="text-muted">Subspeciality:</span>
            <span>{{product.subspeciality}}</span><br>
            <span class="text-muted">Modality:</span>
            <span>{{product.modality}}</span>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="h6 pb-2"> <a class=text-dark href= "{% url 'products:company-detail' slug=product.company.slug %}" title={{product.company.company_name}} >{{ product.company.company_name }}</a></div>
        <div class="h3 font-weight-bold mb-1"> <a class=text-dark href= "{% url 'products:product-detail' slug=product.slug %}" title={{product.product_name}}>{{product.product_name}}</a></div>
        <div class="text-muted">
          <p>{{ product.key_features|short:100 }}</p>
        </div>
        <p>{{product.description_short}}</p>
        <div class="pt-1 pb-2">
          <a href="{% url 'products:product-detail' slug=product.slug %}" title="{{product.product_name}}" class="btn btn-square btn-radboud">Read more</a>
        </div>
      </div>


      <div class="col-sm-3 bg-light pt-2">
        <div class="d-flex justify-content-between flex-column h-100">
          <div>
            <div class="d-flex justify-content-between">
                <a href="#" data-toggle="tooltip" data-placement="top" class="h6 text-muted mr-auto pb-1"
                   title= {% include "products/partials/tooltip_CE.html" %}>
                   CE:
                </a>

                <div class="h6 pr-2">
                  {% if product.ce_class %}
                    <a class=text-dark href="#" data-toggle="tooltip" data-placement="top"
                      title= {% include "products/partials/tooltip_CE_class.html" %}>
                      {{product.ce_class}}
                    </a>
                  {% endif %}
                  {% if product.ce_under %}
                    -
                    <a class=text-dark href="#" data-toggle="tooltip" data-placement="top"
                      title= {% include "products/partials/tooltip_CE_MDD_MDR.html" %}>
                      {{product.ce_under}}
                    </a>
                  {% endif %}
                </div>

              <img src="{% icon product 'ce_status' %}" alt="Logo" style="width:10%; height:10%">
            </div>
            <div class="d-flex justify-content-between">
                <a href="#" data-toggle="tooltip" data-placement="top" class="h6 text-muted mr-auto pb-1"
                   title= {% include "products/partials/tooltip_FDA.html" %}
                   >FDA:
                </a>
              <div class="h6 pr-2 text-dark">{% if product.fda_class %}{{product.fda_class}}{% endif %}</div>
              <img src="{% icon product 'fda_status' %}" alt="Logo" style="width:10%; height:10%">
            </div>
          </div>
          <div>
            <div class="d-flex justify-content-between">
              <span class="h6 text-muted">Information source:</span>
              <div class="ml-auto">
                {% if product.verified == 'yes' %}
                  <span>Vendor</span>
                {% else %}
                  <span>Public</span>
                {% endif %}
              </div>
            </div>
            <div class="d-flex justify-content-between">
            <span class="h6 text-muted">Certification verified:</span>
              <div class="ml-auto">
                {% if product.ce_verified == 'yes' %}
                  <span>Yes</span>
                {% else %}
                  <span>No</span>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>