{% extends '/admin/authenticated/layout/base.html.twig' %}

{% import '/admin/components/helpers_macro.html.twig' as helpers %}


{% block title %}
    Team Members
{% endblock %}

{% block content %}

    {{ helpers.notifications_success() }}
    {{ helpers.notifications_error() }}
    {{ helpers.notifications_warning() }}


    <div class="card card-outline card-primary">
        <div class="card-header card-header-compressed">
            <strong class="font-20">
                Team Members
                <button class="btn btn-sm btn-light" data-toggle="collapse"
                        href="#collapseFilters">
                    <i class="fas fa-search"></i>
                    Filters
                </button>
            </strong>
            <div class="d-inline-block">
                {% include '/admin/authenticated/aboutUs/team_member/_filter_indicator.html.twig' %}
            </div>
            <div class="card-tools">
                <a href="{{ path('bo_team_member_create') }}" class="btn btn-sm btn-success">
                    <i class="fas fa-plus"></i>
                    Create
                </a>
            </div>
        </div>
        <div class="card-body table-responsive">

            <div class="collapse p-2" id="collapseFilters">
                {% include '/admin/authenticated/aboutUs/team_member/_filter_form.html.twig' %}
            </div>


            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th class="d-none d-md-block">Contact</th>
                    <th>Status</th>
                    <th style="width: 100px;"></th>
                </tr>
                </thead>
                <tbody>
                {% for item in pagination %}
                    <tr id="teamMemberRow-{{ item.id }}"
                        data-expandable-row="#expandable-row-{{ item.id }}"
                        data-fullname="{{ item.fullName }}"
                        data-title="{{ item.fullName }}"
                        data-url-remove="{{ path('bo_team_member_remove', {id: item.id}) }}"
                        class="rowTeamMember"
                        data-widget="expandable-table" aria-expanded="false">
                        <td>
                            <i class="fa fa-plus mr-2 text-muted d-none d-md-inline"></i>
                            {% if item.picture %}
                                <img src="{{ asset(directoryUploadTeamMember ~ '/' ~ item.picture) }}"
                                     width="30"
                                     height="30"
                                     class="img-circle d-none d-md-inline">
                            {% else %}
                                <img src="{{ asset('/img/bo/no-team-member-picture.png') }}" width="30"
                                     height="30" class="img-circle d-none d-md-inline">
                            {% endif %}
                            {{ item.fullName }}</td>
                        <td>{{ item.position }}</td>
                        <td class="d-none d-md-block">
                            <div>
                                <i class="fa fa-envelope font-14"></i>
                                <small>{{ item.email }}</small>
                            </div>
                            <div>
                                <i class="fa fa-phone font-14"></i>
                                <small>{% if item.phone %}{{ item.phone|dashed }}{% endif %}</small>
                            </div>
                        </td>
                        <td>
                            {% if item.active %}
                                <strong class="text-success">Active</strong>
                            {% else %}
                                <strong class="text-danger">Inactive</strong>
                            {% endif %}
                        </td>
                        <td style="width: 100px;">
                            <div class="text-right">
                                <a href="{{ path('bo_team_member_edit', {id: item.id}) }}"
                                   class="btn btn-outline-info btn-xs"
                                   type="button"
                                   title="Edit">
                                    <i class="fa-solid fa-pen"></i>
                                </a>
                                <button class="btn btn-outline-danger btn-xs btnRemoveTeamMemberFromList"
                                        type="button"
                                        title="Delete">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr class="expandable-body" id="expandable-row-{{ item.id }}">
                        <td class="pb-5" colspan="5">
                            <div class="row">
                                <div class="col-3">
                                    {% if item.active %}
                                        <span class="badge badge-success user-status-floating">Active</span>
                                    {% else %}
                                        <span class="badge badge-danger user-status-floating">Inactive</span>
                                    {% endif %}
                                    {% if item.picture %}
                                        <img src="{{ asset(directoryUploadTeamMember ~ '/' ~ item.picture) }}"
                                             width="100"
                                             height="100" class="img-circle">
                                    {% else %}
                                        <img src="{{ asset('/img/bo/no-team-member-picture.png') }}" width="100"
                                             height="100">
                                    {% endif %}

                                    <div class="text-muted">
                                        <div>{{ item.fullName }}</div>
                                        <div>{{ item.position }}</div>
                                        <div>
                                            <i class="fa fa-envelope font-14"></i>
                                            <small>{{ item.email }}</small>
                                        </div>
                                        <div>
                                            <i class="fa fa-phone font-14"></i>
                                            <small>{% if item.phone %}{{ item.phone|dashed }}{% endif %}</small>
                                        </div>
                                        <div>
                                            {% if item.facebook %}
                                                <a href="{{ item.facebook }}" class="mr-2"><i
                                                            class="fa fa-facebook"></i></a>
                                            {% endif %}
                                            {% if item.twitter %}
                                                <a href="{{ item.twitter }}" class="mr-2"><i class="fa fa-twitter"></i></a>
                                            {% endif %}
                                            {% if item.instagram %}
                                                <a href="{{ item.instagram }}" class="mr-2"><i
                                                            class="fa fa-instagram"></i></a>
                                            {% endif %}
                                            {% if item.linkedin %}
                                                <a href="{{ item.linkedin }}" class="mr-2"><i
                                                            class="fa fa-linkedin"></i></a>
                                            {% endif %}
                                        </div>
                                    </div>

                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col-12">
                                            <div><strong>Details</strong></div>
                                            {% if item.details %}
                                                <div class="p-2 bg-dark">
                                                    <iframe class="w-100" style="border: none;height: 300px;"
                                                            srcdoc="{{ item.details }}"></iframe>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                <tr id="rowNoFoundData" class="{{ pagination.getTotalItemCount > 0 ? 'd-none' }}">
                    <td colspan="9" class="text-center">No data found.</td>
                </tr>
                </tbody>
            </table>

            {{ helpers.pagination(pagination) }}

        </div>
        {{ helpers.form_processing() }}
    </div>
    {% include '/admin/authenticated/aboutUs/team_member/_modalRemoveTeamMember.html.twig' %}

{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="{{ asset('/app/admin/js/authenticated/AboutUs/TeamMember/TeamMemberList.js') }}"></script>
    <script src="{{ asset('/app/admin/js/authenticated/layout/Common/ListFilters.js') }}"></script>
    <script>
        (new ListFilters()).init();
        (new TeamMemberList()).init();
    </script>
{% endblock %}