{% extends "main/base_template.html" %}

{% block title %}Roo.me - Home page{% endblock %}

{% block content %}
  <div class="row row-cols-1 row-cols-md-2 g-3">
    {% for apartment in apartments %}
      <div class="col">
        <div class="card h-100">
          <ul class="nav nav-pills" id="myTab" role="tablist">
            <li class="nav-item">
            <a class="nav-link active" id="apt-tab-{{apartment.owner.id}}" data-toggle="tab"
            href="#apt-{{apartment.owner.id}}" role="tab" aria-controls="apt-{{apartment.owner.id}}"
            aria-selected="true">Apartment</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="rmt-tab-{{apartment.owner.id}}" data-toggle="tab" href="#rmt-{{apartment.owner.id}}"
            role="tab" aria-controls="rmt-{{apartment.owner.id}}" aria-selected="false">Roommate</a>
          </li>
        </ul>

        <div class="tab-content" id="card-tab-content">
          <div class="tab-pane fade show active" id="apt-{{apartment.owner.id}}" role="tabpanel"
            aria-labelledby="apt-tab-{{apartment.owner.id}}">
            <img src="{{apartment.image_url}}" class="card-img-top" height=275 width=150 alt="{{apartment.address}}">
            <div class="card-body">
              <h5 class="card-title">{{apartment.address}}, {{apartment.city}}</h5>
              <h6 class="card-subtitle mb-2 text-muted">Uploaded by {{apartment.owner.first_name}}
                {{apartment.owner.last_name}}</h6>
              {% if apartment.owner.not_smoking %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-smoking-ban"></i><small> No
                  smoking</small></span>
              {% endif %}
              {% if apartment.owner.pets_allowed %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-paw"></i><small> Pet friendly</small></span>
              {% endif %}
              {% if apartment.owner.air_conditioner %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-fan"></i><small> A/C</small></span>
              {% endif %}
              {% if apartment.owner.balcony %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-sun"></i><small> Balcony</small></span>
              {% endif %}
              {% if apartment.owner.elevator %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-arrow-alt-circle-up"></i><small>
                  Elevator</small></span>
              {% endif %}
              {% if apartment.owner.long_term %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-file-signature"></i><small> Long
                  Term</small></span>
              {% endif %}
              {% if apartment.owner.immediate_entry %}
              <span class="badge rounded-pill bg-secondary"><i class="fas fa-calendar-day"></i><small> Imediate
                  Entry</small></span>
              {% endif %}
              <br><br>
              <h6><i class="fas fa-user"></i> {{apartment.num_of_roomates}} Roommates &nbsp; &nbsp;
                <i class="fas fa-door-closed"></i> {{apartment.num_of_rooms}} Rooms
              </h6>
              <p><i class="fas fa-money-check-alt"></i><strong> Rent:</strong> {{apartment.rent}} &nbsp; &nbsp; &nbsp;
                &nbsp;
                <i class="fas fa-calendar-day"></i><strong> Entry:</strong> {{apartment.start_date}}
              </p>
              <a href="/contacts/add/{{apartment.pk}}" class="btn btn-primary">YES <i class="fas fa-check-circle"></i></a>
              <a href="/contacts/decline/{{apartment.pk}}" class="btn btn-primary">NO <i
                  class="fas fa-times-circle"></i></a>
              <a href="/apartments/{{apartment.pk}}/details" class="btn btn-primary">More Information</a>
              <br><br>
              <h6><strong>About</strong></h6>
              <p class="card-text">{{apartment.about}}</p>
            </div>
          </div>

          <div class="tab-pane fade" id="rmt-{{apartment.owner.id}}" role="tabpanel"
            aria-labelledby="rmt-tab-{{apartment.owner.id}}">
            <img src={{apartment.owner.image_url}} class="card-img-top" height=275 width=150 alt={{apartment.address}}>
            <div class="card-body">
              <h5 class="card-title">{{apartment.owner.first_name}} {{apartment.owner.last_name}}</h5>
              <h6 class="card-subtitle mb-2 text-muted">{{apartment.address}}, {{apartment.city}}</h6>
              {% for hobby in apartment.owner.hobbies.all %}
              <span class="badge rounded-pill bg-secondary"><small>{{hobby}}</small></span>
              {% endfor %}
              <br><br>
              <br>
            </div>
          </div>
        </div>
      <div class="card-footer">
        <small class="text-muted">Uploaded on {{apartment.date_posted}}</small>
      </div>
    </div>
      </div>
    {% endfor %}
  </div>

{% endblock %}