<% title = trans.cruds.MODULE.POST + ' ' + trans.global.view + ' - ' + companyInfo.NAME %>

<div class="container-fluid">
    <!-- Page Title -->
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6 col-12">
                <h2><%= trans.cruds.POST?.title %></h2>
            </div>
            <div class="col-sm-6 col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="<%= '/admin/dashboard' %>">
                            <i class="iconly-Home icli svg-color"></i> <%= trans.global.home %>
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="<%= '/admin/posts' %>">
                            <%= trans.cruds.POST?.title_singular || trans.global.view %>
                        </a>
                    </li>
                    <li class="breadcrumb-item active"><%= trans.global.view %></li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="edit-profile">
        <div class="row">
            <div class="col-xl-12">
                <!-- Card with POST Details -->
                <div class="card mb-4">
                    <div class="card-header card-no-border pb-0">
                        <h3 class="card-title mb-0">
                            <% if(form_type == 'product'){ %>
                                <%= trans.cruds.POST?.tab_heading?.product?.title_singular + ' ' + trans.global.view %>
                            <% } else if(form_type == 'job'){ %>
                                <%= trans.cruds.POST?.tab_heading?.job?.title_singular + ' ' + trans.global.view %>
                            <% } else if(form_type == 'community'){ %>
                                <%= trans.cruds.POST?.tab_heading?.community?.title_singular + ' ' + trans.global.view %>
                            <% } else if(form_type == 'service'){ %>
                                <%= trans.cruds.POST?.tab_heading?.service?.title_singular + ' ' + trans.global.view %>
                            <% } else { %>
                                <%= trans.cruds.POST?.title || trans.global.view %> 
                            <% } %>
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <% postsPopulatedDoc.forEach(function(item) { %>
                                <% if (!item?.key?.attributeId || item?.key?.isDeleted) return; %>

                                <div class="col-sm-6 col-md-3">
                                    <div class="form-group mb-3">
                                        <label class="form-label">
                                            <%= item.key.attributeId.label || item.key.attributeId.title %> :
                                        </label>

                                        <% if (item.type === 'singleimageuploader' && item.value?.meta?.files?.length) { %>
                                            <div>
                                                <img src="<%= item.value.meta.files[0].location %>" alt="Image"
                                                    class="img-fluid rounded shadow-sm" style="max-height: 120px;">
                                            </div>
                                        <% } else if(item.type === 'multipleimageuploader' && item.value?.meta?.files?.length){ %>
                                            <div class="">
                                                <% item.value.meta.files.forEach(function(file) { %>
                                                    <img src="<%= file.location %>" alt="Image" class="img-fluid rounded shadow-sm m-2" style="max-height: 120px;">
                                                <% }); %>
                                            </div>
                                        <% } else if(item.type === 'singlevideouploader' && item.value?.meta?.files?.length){ %>
                                            <div>
                                                <video controls class="img-fluid rounded shadow-sm" style="max-height: 120px;">
                                                    <source src="<%= item.value.meta.files[0].location %>" type="<%= item.value.meta.files[0].mimetype %>">
                                                    Your browser does not support the video tag.
                                                </video>
                                            </div>
                                        <% } else if(item.type === 'multiplevideouploader' && item.value?.meta?.files?.length){ %>
                                            <div>
                                                <% item.value.meta.files.forEach(function(file) { %>
                                                    <video controls class="img-fluid rounded shadow-sm" style="max-height: 120px;">
                                                        <source src="<%= file.location %>" type="<%= file.mimetype %>">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                <% }); %>
                                            </div>

                                        <% } else if (item.type === 'singleselectdropdown' && item.value) { %>
                                            <div>
                                                <% 
                                                    const selectedOption = item.key.attributeId.options.find(option => option._id.toString() === item.value.content.toString());
                                                %>
                                                <span>
                                                    <%- selectedOption ? selectedOption.value : item.value.content %> 
                                                </span>
                                            </div>
                                        <% } else if(item.type === 'texteditor' && item.value){ %>
                                            <span><%- item.value?.content || trans.global.not_available %></span>
                                        <% } else if(item.type === 'textarea' && item.value){ %>
                                            <span><%- item.value?.content || trans.global.not_available %></span>
                                        <% } else { %>
                                            <span><%= item.value?.content || trans.global.not_available %></span>
                                        <% } %>
                                    </div>
                                </div>
                            <% }); %>

                            <!-- Post Status -->
                            <div class="col-12">
                                <div class="form-group mb-1">
                                    <label class="form-label"><%= trans.cruds.POST.fields.status %>:</label>
                                    <span class="<%= (postStatus == 'active') ? 'text-green' : 'text-red' %>">
                                        <%= postStatus.charAt(0).toUpperCase() + postStatus.slice(1).toLowerCase() %>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>