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

{% load static %}
{% block pageName %}
Member Profile
{% endblock pageName %}

{% block content %}


<style>
    /* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }
  
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>


<div class="">
    <div class="row d-flex justify-content-center align-items-center">
        <div class="col-md-4 d-flex justify-content-center align-items-center mb-3">
            <div class="card">
                {% if member.picture %}
                <img class="card" width="300px"  src="{{ member.picture.url }}" alt="">
                {% else %}
                <img class="card" width="300px" src="{% static "dist/assets/img/avatar.png" %}" alt="">
                {% endif %}
            </div>
        </div>
        <div class="col-md-8">
            <div class="card responsive-table font-oswald p-2 pb-0 mb-0">
                <table class="table pb-0 mb-0">
                    <tr>
                        <td class="fw-bold" width="20%">BA No</td>
                        <td>{{ member.army_no }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Status</td>
                        <td>{{ member.member_type.showName }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Rk</td>
                        <td>{{ member.rank }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Name</td>
                        <td>{{ member.name }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Appt</td>
                        <td>{{ member.apartment }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Mob No</td>
                        <td>{{ member.mobile_no }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold" width="20%">Unit</td>
                        <td>{{ member.company.battalion.name }}</td>
                    </tr>
                    <tr class="pb-0 mb-0">
                        <td class="fw-bold" width="20%">Sub Unit</td>
                        <td>{{ member.company.name }}</td>
                    </tr>
                    {% if member.short_name %}
                    <tr>
                        <td class="fw-bold" width="20%">Short Name</td>
                        <td>{{member.short_name}}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
</div>

{% include "profile/member_profile_information.html" %}

<div>
<!-- Search Form -->
    <form method="GET" class="">
        <div class="d-flex mb-1 input-group">
            <input type="number" name="year" class="form-control " placeholder="Year" value="{{ year }}">
            <button type="submit" class="btn btn-primary">Search</button>
            <a class=" btn btn-success" target="_blank" href="{% url "master_report_pdf_member" member.id %}?year={{ year }}"><i class="bi bi-printer"></i> PDF</a>
        </div>
    </form>
</div>


{% include "profile/member_profile_details.html" %}




{% endblock content %}