{% extends "emmaa_page_template.html" %}

{% block body %}
<div class="container">
  <div class="row card-deck mb-3 text-center">
    {% for model_id, model_meta in model_data %}
    <div class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">{{ model_meta['human_readable_name'].title() }}</h4>
        </div>
        <img class="card-img-top"
             data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail"
             alt="Thumbnail [100%x225]"
             src="https://s3.amazonaws.com/emmaa/models/{{ model_id }}/{{ model_id }}_image.png"
             data-holder-rendered="true"
             style="height: 225px; width: 100%; display: block; padding: 1px;">
        <div class="card-body">
          <p class="card-text">{{ model_meta['description'] }}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('get_model_dashboard', model=model_id, tab='model') }}">Details</a>
              <a class="btn btn-sm btn-outline-secondary"
                 href="http://www.ndexbio.org/#/network/{{ model_meta['ndex']['network'] }}" target="_blank">View on NDEX</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}

  </div>
</div>
{% endblock %}