<!DOCTYPE html>
{% macro render_if_exist(name, value) %}
  {% if value %}
    <div>{{name}}: {{value}}</div>
  {%- endif %}
{% endmacro %}
{% macro render_list(list) %}
  {% if list %}
  <ul>
  {% for item in list %}
    <li>{{ item }}</li>
  {% endfor %}
  </ul>
  {%- endif %}
{% endmacro %}
{% macro render_graphics(graphics) %}
  <div class="img-container">
  {% for graph in graphics %}
    <div class="img-item">
      <img src='data:image/jpeg;base64,{{ graph.image }}' alt='{{ graph.name }}' />
    </div>
  {% endfor %}
  </div>
{% endmacro %}
<html lang="en">
<head>
<style>
  h1 {text-align: center;}
  .row {
    display: flex;
  }
  .col {
    flex: 1;
  }
  .card {
    padding: 1em;
    border: 1px solid #DADCE0;
    margin: 10px;
  }
  .img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
  }
  .img-item {
    flex: 1;
  }
</style>
<title>
  Model Card for {{ model_card.model_details.name }}
</title>
</head>
<body>
  <h1>
    Model Card for {{ model_card.model_details.name }}
  </h1>
    <div class="row">
      <div class="col card">
        <h2>Model Details</h2>
          {% set model_details = model_card.model_details %}
          {% if model_details.overview %}
            <h3>Overview</h3>
              {{  model_details.overview }}
          {% endif %}
          {% if model_details.version %}
            <h3>Version</h3>
              {{ render_if_exist('name', model_details.version.name) }}
              {{ render_if_exist('date', model_details.version.date) }}
              {{ render_if_exist('diff', model_details.version.diff) }}
          {% endif %}
          {% if model_details.owners %}
            <h3>Owners</h3>
              <ul>
              {% for owner in model_details.owners %}
                <li>{{ owner.name }}, {{ owner.contact }}</li>
              {% endfor %}
              </ul>
          {% endif %}
          {% if model_details.license %}
            <h3>License</h3>
              {{  model_details.license }}
          {% endif %}
          {% if model_details.references %}
            <h3>References</h3>
              {{ render_list(model_details.references) }}
          {% endif %}
          {% if model_details.citation %}
            <h3>Citation</h3>
              {{ model_details.citation }}
          {% endif %}
      </div>
      <div class="col card">
        <h2>Considerations</h2>
          {% set considerations = model_card.considerations %}
          {% if considerations.users %}
            <h3>Intended Users</h3>
              {{ render_list(considerations.users) }}
          {% endif %}
          {% if considerations.use_cases %}
            <h3>Use Cases</h3>
              {{ render_list(considerations.use_cases) }}
          {% endif %}
          {% if considerations.limitations %}
            <h3>Limitations</h3>
              {{ render_list(considerations.limitations) }}
          {% endif %}
          {% if considerations.tradeoffs %}
            <h3>Tradeoffs</h3>
              {{ render_list(considerations.tradeoffs) }}
          {% endif %}
          {% if considerations.ethical_considerations %}
            <h3>Ethical Considerations</h3>
              <ul>
              {% for risk in considerations.ethical_considerations %}
                <li>
                  <div>Risk: {{ risk.name }}</div>
                  <div>Mitigation Strategy: {{ risk.mitigation_strategy }}</div>
                </li>
              {% endfor %}
              </ul>
          {% endif %}
      </div>
    </div>
    <div class="row">
      <div class="col card">
        {% if model_card.model_parameters.data.train.graphics.collection %}
          <h2>Train Set</h2>
            {{ model_card.model_parameters.data.train.graphics.description }}
            {{ render_graphics(model_card.model_parameters.data.train.graphics.collection) }}
        {% endif %}
      </div>
    </div>
    <div class="row">
      <div class="col card">
        {% if model_card.model_parameters.data.eval.graphics.collection %}
          <h2>Eval Set</h2>
            {{ model_card.model_parameters.data.eval.graphics.description }}
            {{ render_graphics(model_card.model_parameters.data.eval.graphics.collection) }}
        {% endif %}
        </div>
    </div>
    <div class="row">
      <div class="col card">
        {% if model_card.quantitative_analysis.graphics.collection %}
          <h2>Quantitative Analysis</h2>
            {{ model_card.quantitative_analysis.graphics.description }}
            {{ render_graphics(model_card.quantitative_analysis.graphics.collection) }}
        {% endif %}
        </div>
    </div>
      </div>
    </div>
</body>
</html>
