<% title = trans.cruds.MODULE.TAG + ' ' + 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.MODULE.TAG %></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/brands' %>"><%= trans.cruds.TAG?.title %></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 Tag Details -->
                <div class="card">
                    <div class="card-header card-no-border pb-0">
                        <h3 class="card-title mb-0"><%= trans.cruds.MODULE.TAG + ' ' + trans.global.view %></h3>
                    </div>
                    <div class="card-body">
                        <!-- Tag Details -->
                        <div class="row">
                            <!-- Title & Description -->
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.title_en %>:</label>
                                    <span><%= tag.title.en %></span>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.description_en %>:</label>
                                    <span><%- tag.description.en || trans.global.not_available %></span>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.title_ar %>:</label>
                                    <span><%= tag.title.ar %></span>
                                </div>
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.description_ar %>:</label>
                                    <span><%- tag.description.ar || trans.global.not_available %></span>
                                </div>
                            </div>

                            <!-- Status & Tag Type -->
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.status %>:</label>
                                    <span><%= tag.status.charAt(0).toUpperCase() + tag.status.slice(1).toLowerCase() %></span>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.tagType %>:</label>
                                    <span><%= trans.cruds.TAG.tagTypes[tag.tagType] %></span>
                                </div>
                            </div>

                            <!-- Visibility & Priority -->
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.visibility %>:</label>
                                    <span><%= trans.cruds.TAG.visibility[tag.visibility] %></span>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.priority %>:</label>
                                    <span><%= tag.priority %></span>
                                </div>
                            </div>

                            <!-- Tag Image & Icon -->
                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.tag_image || "Tag Image" %></label>
                                    <img 
                                        class="img-100" 
                                        id="" 
                                        alt="Tag Image" 
                                        src="<%= tag.tag_image?.file_path ? '/' + tag.tag_image.file_path.replace('public/', '') : '/backend/images/dummy-image.jpg' %>"/>
                                </div>
                            </div>

                            <div class="col-sm-6 col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label"><%= trans.cruds.TAG.fields.tag_icon || "Tag Icon" %></label>
                                    <img 
                                        class="img-100" 
                                        id="" 
                                        alt="Tag Icon" 
                                        src="<%= tag.tag_icon?.file_path ? '/' + tag.tag_icon.file_path.replace('public/', '') : '/backend/images/dummy-image.jpg' %>"/>
                                </div>
                            </div>
                        </div>

                        <!-- Parent Tag -->
                        <% if (hierarchy.length > 0) { %>
                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <h4><%= tag.parentTag ? trans.cruds.TAG.fields.parent_tag_hierarchy : trans.cruds.TAG.fields.child_tag_hierarchy %></h4>
                                    <div class="tree-wrapper">
                                        <ul class="tree vertical">
                                            <% function renderHierarchy(hierarchy, lang) { %>
                                                <% hierarchy.forEach(tag => { %>
                                                <li>
                                                    <div><%= tag.title[lang] || tag.title.en %></div>
                                                    <% if (tag.children) { %>
                                                    <ul>
                                                        <% renderHierarchy(tag.children, lang); %>
                                                    </ul>
                                                    <% } %>
                                                </li>
                                                <% }); %>
                                            <% }; %>
                        
                                            <li>
                                                <div><%= tag.title[lang] || 'Root' %></div>
                                                <ul>
                                                    <% renderHierarchy(hierarchy, lang); %>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>