{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>Packages List</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'css/uikit.min.css' %}">
</head>
<body>
<div class="uk-container uk-margin-top">
  <h1 class="uk-heading-line uk-text-center"><span>Packages for {{ system|default:'?' }}</span></h1>

  {% if packages %}
    <table class="uk-table uk-table-divider uk-table-hover">
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Description</th>
          <th>Requirements</th>
          <th>View</th>
        </tr>
      </thead>
      <tbody>
        {% for package in packages %}
        <tr>
          <td>{{ package.package_name }}</td>
          <td>{{ package.package_type }}</td>
          <td>{{ package.package_description|truncatewords:15 }}</td>
          <td>{% for req in package.package_requirements %}
            <div><code>{{ req.attr }} {{ req.condition }} {{ req.value }}</code></div>
          {% endfor %}
          </td>
          <td><a class="uk-button uk-button-primary uk-button-small" href="/{{ system }}/package/{{ package.id }}">
            View
          </a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <div class="uk-alert-warning uk-padding">No packages found for this system.</div>
  {% endif %}

</div>
<script src="{% static 'js/uikit.min.js' %}"></script>
<script src="{% static 'js/uikit-icons.min.js' %}"></script>
</body>
</html>
