{% extends 'committee/committee_layout.html' %}
{% block head %}  
<style>
    .photo {
        width: 170px;
        height: 220px;
        object-fit: cover;
/*        border: 1px solid #ccc;*/
        border-radius: 5px;
    }
    .photo-border
    {
        width: 200px;
    }
</style>
{% endblock %}
{% block title %}Committee Members{% endblock %} 
{% block content %}

    {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
    <div class="alert alert-success text-center alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/right.png" alt="right" height="21" width="21">{{ mesg }}</h4>
    </div>    
    {% endfor %}
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
    <div class="alert alert-danger text-center alert-dismissible" id="successMessage" >
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <h4><img src="/static/images/wrong_img.png" alt="wrong" height="21" width="21">{{ mesg }}</h4>
    </div>
    {% endfor %} 
<h1 class="text-center">Committee Members</h1>

<div class="row">
    <div class="col">
        {% for user in data %}
             <div class="row bg-primary d-flex align-items-center my-2 py-2">
                <div class="col text-left">
                   <b class=" text-white">{{user.committee_name}}</b>
                </div>
                <div class="col text-right">
                   <a href="{{ url_for('committee.CommitteeUserQuery',user_uuid=user_uuid,society_id=society_id,society_key=society_key,committee_id=user.committee_id) }}" class="btn btn-warning ">Contact committee</a>  
                </div>
             </div>
             <div class="row  justify-content-center">
                
                    {% for i in committee_members_details %}
                        {% if i.committee_id == user.committee_id %}
                    <div class="col-md-6 col-lg-3 col-sm-6 col-xs-6 py-2 text-center">
                        <div class="border rounded h-100 p-2">
                            <div class="m-2">
                                {% if i.attach_file_name %}  
                                    <img class="photo" src="{{i.attach_path}}/{{i.attach_file_name}}" alt="Card image cap">
                                {% else %}
                                    <img class="photo"  src="https://common-application.s3.ap-southeast-1.amazonaws.com/static_asset/empty_image.jpeg" alt="Card image cap">
                                {% endif %}
                            </div>
                            <span class="h6"> <b>{{i.full_name or ''}} <br/><span class="text-danger">{{i.role or ''}} </span></b></span>
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                
            </div>
         {% endfor %}
    </div>
</div>
       


{% endblock %}
{% block script %}
<script type="text/javascript">
    var BaseUrl = document.location.origin
    // $("#collapseFilter").hide(); 
    $(document).ready(function() {
        
    });   

    function send_query(committee_id) 
        {
            alert("hai")
             $.ajax({
              type: 'POST',
              url: BaseUrl+"/committee_user_query",  
              data:{ 'committee_id': committee_id,}, 
              dataType: 'json',
              success: function(data){
                $('input[type=search]').each(function() 
                {
                  $(this).val('');
                });
                $("#reference_id_"+type).val(0);
                $("#show_"+type+"_data").hide();
                $("#search_"+type).show();
                $("#button_"+type).show(); 
              },
            })
        }

</script>
{% endblock %}