{% extends 'core/base.html' %}
{% load widget_tweaks %}
{% block content %}
<div class="conatiner p-4 m-2">
  <div class="header bg-secondary rounded p-2">
    <h1>Properties</h1>
  </div>

  <div style="margin-top: 20px;">
    <a href="{% url 'property-create' %}" class="btn btn-primary">
      Add Property
    </a>
  </div>

  <table class="table" style="margin-top: 20px;">
    <thead>
      <tr>
        <th>Property Name</th>
        <th>Property Type</th>
        <th>Property Owner</th>
        <th>Address</th>
        <th>Units</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
        {% for prop in properties %}
        <tr>
          <td>{{ prop.property_name }}</td>
          <td>{{ prop.property_type}}</td>
          <td>{{ prop.owner.user }}</td>
          <td>{{ prop.address }}</td>
          <td>{{ prop.units.all|length }}</td>
          <td>
              <a class="d-inline-block" href="{% url 'property-detail' prop.id %}"><i class="fa fa-eye text-warning"></i></a>
              <a class="d-inline-block" href="{% url 'property-update' prop.id %}"><i class="fa fa-edit text-primary"></i></a>
              <a class="d-inline-block" href="{% url 'property-delete' prop.id %}"><i class="fa fa-trash text-danger"></i></a>
          </td>
        </tr>
         {% empty %}
        <div class="list-group-item">No records found.</div>
        {% endfor %}
    </tbody>
  </table>
</div>
{% endblock content %}
{% block custom_js %}
<script>
</script>
{% endblock custom_js %}