/**
 * SitefinityNodeDetailsTab - Displays basic info about the selected node
 */
Vue.component('sitefinity-node-details-tab', {
    props: {
        selectedNode: { type: Object, default: null }
    },
    template: `
        <div class="sitefinity-node-details-tab fade-up">
            <div v-if="!selectedNode" class="empty-tab-placeholder" style="padding: 4rem 2rem;">
                <i class="bi bi-info-circle" style="font-size: 2rem; color: var(--text-muted);"></i>
                <p style="color: var(--text-secondary); margin-top: 1rem;">Select a node from the tree to view details</p>
            </div>
            <div v-else class="section-card" style="max-width: 480px;">
                <div class="section-card-header">
                    <h6>{{ selectedNode.name }}</h6>
                    <span class="chip chip-accent" style="font-size:0.75rem;">{{ selectedNode.type || selectedNode.contentType || 'Node' }}</span>
                </div>
                <div class="section-card-body" style="padding: 1rem 1.25rem;">
                    <table class="table-dark-custom table-sm">
                        <tbody>
                            <tr>
                                <td style="color: var(--text-muted); width: 120px;">Content Type</td>
                                <td style="color: var(--text-primary);">{{ selectedNode.type || selectedNode.contentType || '—' }}</td>
                            </tr>
                            <tr>
                                <td style="color: var(--text-muted);">ID</td>
                                <td><code class="mono" style="font-size:0.8rem; word-break: break-all;">{{ selectedNode.id }}</code></td>
                            </tr>
                            <tr v-if="selectedNode.hasChildren !== undefined">
                                <td style="color: var(--text-muted);">Has Children</td>
                                <td>{{ selectedNode.hasChildren ? 'Yes' : 'No' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    `
});
