{% extends "detail.html" %}
{% load static %}

{% block content %}
<table class="table table-hover">
  <tr>
    <th colspan="2" id="summary"><img src="{% static "svg/summary.svg" %}" width="30" height="30" alt="Summary">&nbsp;<a
        href="#">Summary</a></th>
  </tr>
  <tr>
    <td>Battery name</td>
    <td>{{ object.name }}</td>
  </tr>
  {% if object.voltage is not None %}
  <tr>
    <td>Voltage</td>
    <td>{{ object.voltage }}V</td>
  </tr>
  {% endif %}
  {% if object.chemistry is not None %}
  <tr>
    <td>Chemistry</td>
    <td>{{ object.chemistry }}</td>
  </tr>
  {% endif %}
  <tr>
    <th colspan="2" id="compatibility"><img src="{% static "svg/compatibility.svg" %}" width="30" height="30"
        alt="Ownership">&nbsp;<a href="#compatibility">Compatibility</a></th>
  </tr>
  {% if object.compatible_with.all %}
  <tr>
    <td>Compatible with</td>
    <td>
      <ul class="list-inline">
        {% for compat in object.compatible_with.all %}
        <li class="list-inline-item"><a href="{% url 'schema:battery-detail' compat.slug %}">{{ compat }}</a></li>
        {% endfor %}</ul>
    </td>
  </tr>
  {% endif %}
  <tr>
    <th colspan="2" id="meta"><img src="{% static "svg/tag.svg" %}" width="30" height="30" alt="Meta">&nbsp;<a
        href="#meta">Meta</a></th>
  </tr>
  {% if history %}
  <tr>
    <td>Edit history</td>
    <td>{% include "history.html" %}</td>
  </tr>
  {% endif %}
</table>
{% endblock %}
