{% load thumbnail %}
{% for mem in member_list %}
<!--{% ifchanged mem.status%}
{% if not forloop.first %}</div>{% endif %}
<div class="w3-row">
{% endifchanged %}-->
	
<!--<div class="w3-col l{{l}} m{{m}} s{{s}} w3-hoverable w3-center"> -->
 {% if show_former != 0 or mem.active %}   
    <div class="w3-quarter w3-center w3-padding-16 w3-hide-small w3-hide-medium" style="height: 300px;">
	<!-- <div class="w3-cell w3-white w3-hoverable w3-center w3-padding-32">-->
			<a href="{{mem.get_absolute_url}}" style="text-decoration: none">
                    {% if show_former_only!=0 %}
                        {%if not mem.active%}
                            {% if mem.image %}
                                <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
                                    {% if name != 0%}
                                        <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                        {% if mem.status != "unknown" %}
                                            <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
                                        {% endif %}
                                    {% else %}
                                        <div class="w3-small w3-padding">{{ mem.given_name}} {{ mem.last_name }}</div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        {% endif %}
                    {% elif mem.active %}
                   
						<!-- <img src="/{{ mem.image }}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain> -->
						<img src="{% thumbnail mem.image 200x200 quality=90 %}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain alt="{{ mem.last_name }}">
						<div class="w3-container" style="margin-top:16;line-height:1.2">
							{% if name != 0%}
								<h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
								{% if status == 1 %}
                                <h6>Responsible person</h6>
                                {% else %}
                                <h6>{{ mem.status|capfirst }}</h6>
                                {% endif %}
							{% else %}
							    <div class="w3-small">{{ mem.given_name}} {{ mem.last_name }}</div>
							{% endif %}
						</div>
                        
					{% else %}
	                    {% if show_former != 0 %}
							{% if mem.image %}
                                {% if former_shadow == 0 %}
                                    <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                    <div class="w3-container" style="margin-top:16;line-height:1.2">
                                {% else %}
                                    <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                    <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
                                {% endif %}
                                {% if name != 0%}
                                    <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                    {% if mem.status != "unknown" %}
                                        <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
                                    {% endif %}
                                {% else %}
                                <div class="w3-small w3-padding">{{ mem.given_name}} {{ mem.last_name }}</div>
                                {% endif %}
                            </div>
                            {% endif %}
						{% endif %}
					{% endif %}
			</a>
	</div>
{% endif %}


 {% if show_former != 0 or mem.active %} 
    <div class="w3-third w3-center w3-padding-16 w3-hide-small w3-hide-large" style="height: 300px;">
        <!-- <div class="w3-cell w3-white w3-hoverable w3-center w3-padding-32">-->
                <a href="{{mem.get_absolute_url}}" style="text-decoration: none">
                        {% if show_former_only!=0 %}
                            {%if not mem.active%}
                                {% if mem.image %}
                                    <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                    <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
                                        {% if name != 0%}
                                            <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                            {% if mem.status != "unknown" %}
                                                <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
                                            {% endif %}
                                        {% else %}
                                            <div class="w3-small w3-padding">{{ mem.given_name}} {{ mem.last_name }}</div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% elif mem.active %}
                            <!-- <img src="/{{ mem.image }}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain> -->
                            <img src="{% thumbnail mem.image 200x200 quality=90 %}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain alt="{{ mem.last_name }}">
                            <div class="w3-container" style="margin-top:16;line-height:1.2">
                                {% if name != 0%}
                                    <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                    {% if status == 1 %}
                                    <h6>Responsible person</h6>
                                    {% else %}
                                    <h6>{{ mem.status|capfirst }}</h6>
                                    {% endif %}
                                {% else %}
                                    <div class="w3-small">{{ mem.given_name}} {{ mem.last_name }}</div>
                                {% endif %}
                            </div>
                        {% else %}
                            {% if show_former != 0 %}
                                {% if mem.image %}
                                    {% if former_shadow == 0 %}
                                        <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                        <div class="w3-container" style="margin-top:16;line-height:1.2">
                                    {% else %}
                                        <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                        <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
                                    {% endif %}
                                    {% if name != 0%}
                                        <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                        {% if mem.status != "unknown" %}
                                            <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
                                        {% endif %}
                                    {% else %}
                                    <div class="w3-small">{{ mem.given_name}} {{ mem.last_name }}</div>
                                    {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% endif %}
                </a>
	</div>
{% endif %}            
 {% if show_former != 0 or mem.active %} 
    <div class="w3-half w3-center w3-padding-16 w3-hide-medium w3-hide-large" style="height: 300px;">
        <!-- <div class="w3-cell w3-white w3-hoverable w3-center w3-padding-32">-->
                <a href="{{mem.get_absolute_url}}" style="text-decoration: none">
                        {% if show_former_only!=0 %}
                            {%if not mem.active%}
                                {% if mem.image %}
                                    <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
                                    <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
                                        {% if name != 0%}
                                            <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                            {% if mem.status != "unknown" %}
                                                <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
                                            {% endif %}
                                        {% else %}
                                            <div class="w3-small w3-padding">{{ mem.given_name}} {{ mem.last_name }}</div>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endif %}
                        {% elif mem.active %}
                            <!-- <img src="/{{ mem.image }}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain> -->
                            <img src="{% thumbnail mem.image 200x200 quality=90 %}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain alt="{{ mem.last_name }}">
                            <div class="w3-container" style="margin-top:16;line-height:1.2">
                            {% if name != 0%}
                                <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
                                {% if status == 1 %}
                                	<h6>Responsible person</h6>
                                {% else %}
                                	<h6>{{ mem.status|capfirst }}</h6>
                                {% endif %}
                            {% else %}
                                <div class="w3-small">{{ mem.given_name}} {{ mem.last_name }}</div>
                            {% endif %}
                            </div>
                        {% else %}
                            {% if show_former != 0 %}
                            	{% if mem.image %}
		                            {% if former_shadow == 0 %}
		                                <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px" class="w3-round-large w3-hover-shadow" object-fit=contain >
		                                <div class="w3-container" style="margin-top:16;line-height:1.2">
		                            {% else %}
		                                <img src="{% thumbnail mem.image 200x200 quality=90 %}" alt="{{ mem.last_name }}" style="height:{{height}}px;opacity:0.5" class="w3-round-large w3-hover-shadow" object-fit=contain >
		                                <div class="w3-container" style="margin-top:16;line-height:1.2;opacity:0.5">
		                            {% endif %}
		                            {% if name != 0%}
		                                <h5>{{ mem.given_name }} {{ mem.last_name }}</h5>
		                                {% if mem.status != "unknown" %}
		                                    <h6>former {% if not "unknown" in mem.status.name %}{{ mem.status|capfirst }}{% else %}Team member{% endif %}</h6>
		                                {% endif %}
		                            {% else %}
		                            	<div class="w3-small">{{ mem.given_name}} {{ mem.last_name }}</div>
		                            {% endif %}
                               	 	</div>
                            	{% endif %}
                        	{% endif %}
                        {% endif %}
                </a>
        </div>
{% endif %}         
{% empty %}
	No member to show
{% endfor %}