{% extends 'userbase.html' %}
{% load static %}

{% block content %}
<section class="contact_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
        Search Donor
        </h2>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form_container contact-form">
            
            <form action="" method="GET">
              {% csrf_token %}
              <div class="form-row">
                <div class="col-lg-6">
                  <div>
                    <select type="text" name="bloodgroup" id="bloodgroup" value="" class="form-control" required="true">
                        <option value="">Choose Blood Group</option>
                        {% for i in bgrp %}
   
                              <option value="{{i.bloodgroup}}">{{i.bloodgroup}}</option>{% endfor %}

                        </select>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div>
                    <input type="text" placeholder="Location" name="location" class="form-control" required="true"/>
                  </div>
                </div>
              </div>
              
              
              <div class="btn_box">
                <button>
                  Search
                </button>
              </div>
            </form>
<br>

            <section class="doctor_section layout_padding" >
                <div class="container" style="padding-top: 20px;">
               
                  {% if messages %}
                  {% for message in messages %}
                   {% if message.tags == 'error' %}
                 <div class="alert alert-warning alert-dismissible fade show" role="alert" style="color: red;">
                {{message}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color: red;">
               <span aria-hidden="true">&times;</span>
                   </button>
                    </div>
                 {% endif %}
                  {% endfor %}
                 {% endif %}
                     {% if messages %}
                  {% for message in messages %}
                   {% if message.tags == 'info' %}
                 <div class="alert alert-warning alert-dismissible fade show" role="alert" style="color: red;">
                {{message}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color: red;">
               <span aria-hidden="true">&times;</span>
                   </button>
                    </div>
                 {% endif %}
                  {% endfor %}
                 {% endif %}
                 {% if searchdonor %}
                  <div class="row">
                    {% for donor in searchdonor %}
                    <div class="col-sm-6 col-lg-4 mx-auto">
                      <div class="box">
                        <div class="img-box">
                          <img src="{{donor.admin.profile_pic.url}}" width="200" height="300" alt="">
                        </div>
                        <div class="detail-box">
                          <div class="social_box">
                            <a href="">
                              <i class="fa fa-facebook" aria-hidden="true"></i>
                            </a>
                            <a href="">
                              <i class="fa fa-twitter" aria-hidden="true"></i>
                            </a>
                            <a href="">
                              <i class="fa fa-youtube" aria-hidden="true"></i>
                            </a>
                            <a href="">
                              <i class="fa fa-linkedin" aria-hidden="true"></i>
                            </a>
                          </div>
                          <h5>
                            {{donor.admin.first_name}} {{donor.admin.last_name}}
                          </h5>
                          <p>Gender: {{donor.gender}}</p>
                        <p>Blood Group: {{donor.bloodgroup.bloodgroup}}</p>
                        <p>Age: {{donor.age}}</p>
                        <p>Mobile Number: {{donor.mobilenumber}}</p>
                        <p>Address: {{donor.address}}</p>
                        
                        <h6 class="">
                          <a href="{% url 'blood-request' donor.id %}" class="btn btn-primary">Request</a>
                        </h6>
                        </div>
                      </div>
                    </div>{% endfor %}
                   
                   
                  </div>
                  
                </div>
              </section>
              {% endif %}
       
      </div>
          </div>
        </div>
        
      </div>
    </div>
  </section>


{% endblock %}