{% extends 'generic/object.html' %}
{% load helpers %}

{% block content %}
<div class="row mb-3">
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Contract</h5>
      <table class="table table-hover attr-table">
        <tr><th scope="row">Provider</th><td>{{ object.provider|linkify }}</td></tr>
        <tr><th scope="row">Name</th><td>{{ object.name }}</td></tr>
        <tr><th scope="row">Contract number</th><td>{{ object.contract_number|placeholder }}</td></tr>
        <tr><th scope="row">Support level</th><td>{{ object.get_support_level_display|placeholder }}</td></tr>
        <tr><th scope="row">Start date</th><td>{{ object.start_date|placeholder }}</td></tr>
        <tr>
          <th scope="row">End date</th>
          <td>
            {{ object.end_date|placeholder }}
            {% if object.expired %}<span class="badge text-bg-red">Expired</span>
            {% elif object.expiring_soon %}<span class="badge text-bg-yellow">Expiring soon</span>{% endif %}
          </td>
        </tr>
        <tr><th scope="row">Cost</th><td>{{ object.cost|placeholder }} {{ object.currency }}</td></tr>
      </table>
    </div>
  </div>
  <div class="col col-md-6">
    {% include 'inc/panels/custom_fields.html' %}
    {% include 'inc/panels/tags.html' %}
    {% include 'inc/panels/comments.html' %}
  </div>
</div>

<div class="row mb-3">
  <div class="col col-md-12">
    <div class="card">
      <h5 class="card-header">Covered Devices ({{ object.devices.count }})</h5>
      <ul class="list-group list-group-flush">
        {% for device in object.devices.all %}
        <li class="list-group-item">{{ device|linkify }}</li>
        {% empty %}
        <li class="list-group-item text-muted">None</li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endblock %}