{#
/*
 * Copyright © ProgramCMS. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Developed by Mohamed EL QUCHIRI <elquchiri@gmail.com>
 */
#}
<div class="forums-tools" style="border-radius: 5px 5px 0 0;font-size: 13px;       color: #FFFFFF;
              background-color: #818386;
              -webkit-box-shadow: inset -1px 25px 32px -10px #6c737a;
              box-shadow: inset -1px 25px 32px -10px #a1a4a7;">
    <div class="row p-2 ps-3 pe-3">
        <div class="col-md-6" style="color: #efe9e9; font-weight: bold;">
                        <span class="me-2 ms-1">
                            <img src="{{ asset('bundles/forumsuiteforum/images/online.png') }}"/>
                        </span>
            <span class="me-2">475 Users</span>
            <span class="me-2">57 Managers</span>
            <span class="me-2">1458 Visitors</span>
        </div>
        <div class="col-md-6 text-end fw-bold">
            {{ block.getTodaysDate() }}
            &middot;
            <div class="btn-group">
                <a class="dropdown-toggle" type="button" style="color: #FFFFFF"
                   data-bs-toggle="dropdown" data-bs-auto-close="true"
                   aria-expanded="false">
                    GMT + 1
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Edit Timezone</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-forums caption-top mb-5">
        {% for category in block.getCategories() %}
            <thead class="table-forum-times">
            <tr>
                <th colspan="2" class="text-center" style="width: 31%;">{{ category.getCategoryName() }}</th>
                <th class="text-center" style="width: 5%">{{ block.trans('Posts') }}</th>
                <th class="text-center" style="width: 5%">{{ block.trans('Comments') }}</th>
                <th class="text-center" style="width: 3%">
                    <img
                            src="{{ asset('bundles/forumsuiteforum/images/viewers-white.png') }}"
                            alt="{{ block.trans('Are online now in this category') }}"
                            title="{{ block.trans('Are online now in this category') }}"
                    />
                </th>
                <th class="text-center" style="width: 15%">{{ block.trans('Replyer') }}</th>
                <th class="text-center" style="width: 7%">{{ block.trans('Monitor') }}</th>
                <th class="text-center" style="width: 21%">{{ block.trans('Last Post') }}</th>
                <th class="text-center" style="width: 7%"></th>
            </tr>
            </thead>
            <tbody>
            {% for forum in block.getCategoryForums(category) %}
                <tr>
                    <td class="text-center" style="vertical-align: top;">
                        <div class="mt-1">{{ block.getCategoryImage(forum)|raw }}</div>
                    </td>
                    <td class="forum-category" style="background-color: #eaeef9">
                        <a style="font-size: 15px;" class="fw-bold" href="{{ block.getForumUrl(forum) }}">{{ forum.getCategoryName() }}</a>
                        <p class="text-muted" style="font-size: 12px;">{{ forum.getCategoryDescription() }}</p>
                    </td>
                    <td class="text-center" style="background-color: #d8dff0; font-weight: bold; font-size: 13px;">
                        {{ block.countCategoryPosts(forum) }}
                    </td>
                    <td class="text-center" style="background-color: #d8dff0; font-weight: bold; font-size: 13px;">
                        {{ block.countCategoryComments(forum) }}
                    </td>
                    <td class="text-center" style="background-color: #d8dff0">0</td>
                    <td class="text-center last_post" style="background-color: #d8dff0">
                        {% if block.getLastComment(forum) %}
                        <p class="text-muted p-0 m-0" style="font-size: 13px;">05:40 - اليوم</p>
                        <a href="{{ block.getUserUrl(block.getLastComment(forum).getUser()) }}" style="font-weight: bold; font-size: 13px;">{{ block.getLastComment(forum).getUser().getUserFirstname() }}</a>
                        {% endif %}
                    </td>
                    <td class="text-center managers">
                        <a href="#">Med</a>
                    </td>
                    <td style="background-color: #eaeef9">
                        {% if forum.getLastPost() %}
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle border border-primary overflow-hidden" style="width: 33px; height: 33px;">
                                    <img src="{{ forum.getLastPost().getUser().getProfileImage() }}" alt=""
                                         class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="flex-grow-1">
                                    <a href="{{ block.getPostUrl(forum, forum.getLastPost()) }}"
                                       class="d-block small"
                                       title="{{ forum.getLastPost().getPostName() }}"
                                    >
                                        <div style="width: 300px; font-size: 15px;" class="text-truncate">
                                        {{ forum.getLastPost().getPostName() }}
                                        </div>
                                    </a>
                                    <small class="text-muted">
                                        {{ block.trans('Posted by') }} :
                                        <a style="font-size: 14px;" href="{{ block.getUserUrl(forum.getLastPost().getUser()) }}" class="text-muted">
                                            {{ forum.getLastPost().getUser().getFullname() }}
                                        </a>
                                    </small>
                                </div>
                            </div>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        <div class="btn-group dropdown">
                            <a class="dropdown-toggle" type="button" style="font-size: 13px;" data-bs-toggle="dropdown"
                               data-bs-auto-close="true"
                               aria-expanded="false">
                                {{ block.trans('Options') }}
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">{{ block.trans('View Forum') }}</a></li>
                                <li><a class="dropdown-item" href="#">{{ block.trans('#Trend Subjects') }}</a></li>
                                <li><a class="dropdown-item" href="#">{{ block.trans('Message the forum moderator') }}</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        {% endfor %}
    </table>
</div>