{% extends 'crm/base.html' %}
{% load static %}
{% block title %}
  My Teams - Teams I am invited to
{% endblock title %}

{% block body %}
  <div class="uk-container" id="Teams">
    <section class="uk-width-1-1@m uk-margin-remove">
      <div class="uk-width-1-1 uk-margin-remove" data-uk-grid>
        <div class="srm-page-heading uk-width-1-2@m uk-padding-small">
          My Other Teams. Teams I am invited to
        </div>


      </div>
      <div class="uk-width-1-1 uk-margin-remove-left uk-padding-remove" data-uk-grid>
        <div class="uk-width-1-2@m uk-padding-remove-left">
          <div class="srm-page-heading uk-text-muted">
            {{ teams.count }} teams total
          </div>
        </div>

      </div>
    </section>
    <div class="uk-child-width-1-3@m uk-child-width-1-2@s srm-contacts-card-list uk-margin-small-top" data-uk-grid>
      {% for team in pag_teams %}
        <div>
          <div class="srm-card uk-padding-remove srm-contact-card">
            <table class="srm-contact-card-table">
              <tbody>
              <tr>
                <td>
                  <div data-uk-grid>
                    <div class="img-thumbnail uk-margin-small-top">
                      <img src="{{ team.creator.profile_image.url }}" alt="" uk-img class="img-thumbnail-img">
                      <img class="uk-border-circle Oval-xsmall">
                    </div>
                    <div class="uk-margin-small-top small-padding-left">
                      <span class="srm-contact-card-label">{{ team.name }}</span><br><span
                      class="srm-contact-card-value uk-margin-small-right">{{ team.creator.get_full_name }}</span><span
                      class="fas fa-comment srm-contact-card-value icon-weight"></span>
                    </div>
                  </div>

                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="uk-width-1-1 uk-margin-remove" data-uk-grid>

                    <div class="srm-contact-card-value-small uk-width-1-2@m uk-padding-remove-left"><span
                      class="fas fa-map-marker-alt uk-margin-small-right"></span> Los Angeles
                    </div>
                    <div
                      class="srm-contact-card-label uk-width-1-2@m uk-padding-remove-left"> {{ team.creator.email }}</div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="">
                  <div class="uk-width-1-1 uk-margin-remove" data-uk-grid>
                    <div class="srm-contact-card-value-small uk-width-1-2@m uk-padding-remove-left "><img
                      src="{% static 'crm/images/contacts-icon.png' %}"
                      srcset="/../static/images/contacts-icon@2x.png 2x, /../static/images/contacts-icon@3x.png 3x"
                      class="uk-margin-small-right">{{ team.members.count }} members
                    </div>
                    <div class="srm-contact-card-value-small uk-width-1-2@m uk-padding-remove-left"><img
                      src="{% static 'crm/images/shape-copy-13.png' %}" alt="" class="uk-margin-small-right">
                      Created: {{ team.date_created|date:"n/Y" }}</div>
                    <div class="uk-padding-remove-left" id="thumbnailImages">
                      {% if team.members %}
                        {% for member in team.members %}
                          {% if member.user %}
                            <img src="{{ member.user.profile_image.url }}" alt="" uk-img
                                 class="img-thumbnail-img negative-margin" width=50 height=50>
                          {% else %}
                            <img src="{% static 'crm/images/images.jpeg.' %}" alt="" uk-img
                                 class="img-thumbnail-img negative-margin" width=50 height=50>
                          {% endif %}
                        {% endfor %}
                        <a href="{% url 'srm:teams:team_detail' team.id %}"><span
                          class="srm-contact-card-label uk-margin-small-left"> View details</span></a>
                      {% else %}
                        <a href="{% url 'srm:teams:team_detail' team.id %}"><span class="srm-contact-card-value-small">You have no members, click here to add more</span></a>
                      {% endif %}
                    </div>
                    <div class="uk-margin-small-bottom uk-padding-remove-left">
                      <p class="crm-text3">{{ team.description }}</p>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="/leave-team/{{ team.id }}/">
                    <button class="srm-button srm-button-primary-outline crm-button-large">Leave</button>
                  </a>
                </td>
              </tr>

              </tbody>
            </table>
          </div>
        </div>
      {% empty %}
        <div class="uk-flex uk-flex-center"><h4>You are not invited to any teams.</h4></div>
      {% endfor %}
    </div>

  </div>


{% endblock body %}

{% block extra_js %}
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function (event) {
      document.getElementById('thumbnailImages').getElementsByTagName('img')[0].classList.remove('negative-margin');
    });
  </script>
{% endblock extra_js %}