<?php $__env->startSection('content'); ?>
    <div class="w-full md:min-h-screen bg-gray-50 pt-[20px] pb-20">
        <div class="mx-auto px-6">

            
            <?php if (isset($component)) { $__componentOriginalc45a5e48f24715e66ba38d7c37555f4d = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.job-descriptions.nav-tabs','data' => ['active' => 'templates']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('job-descriptions.nav-tabs'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['active' => 'templates']); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d)): ?>
<?php $attributes = $__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d; ?>
<?php unset($__attributesOriginalc45a5e48f24715e66ba38d7c37555f4d); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc45a5e48f24715e66ba38d7c37555f4d)): ?>
<?php $component = $__componentOriginalc45a5e48f24715e66ba38d7c37555f4d; ?>
<?php unset($__componentOriginalc45a5e48f24715e66ba38d7c37555f4d); ?>
<?php endif; ?>

            <div x-data="{
                 previewModal: { open: false, template: null },
                 searchQuery: '',
                 selectedDepartment: '',
                 templates: [
                     {
                         id: 'TPL-001', title: 'Software Engineer', department: 'Engineering', level: 'L4 - Mid-Level', rating: 4.8, timesUsed: 245, lastUpdated: '2026-02-15',
                         summary: 'We are seeking a talented Software Engineer to join our engineering team. You will be responsible for designing, developing, and maintaining high-quality software solutions that power our platform.',
                         responsibilities: ['Design and develop software features and systems', 'Write clean, maintainable, and efficient code', 'Participate in code reviews and technical discussions', 'Collaborate with cross-functional teams', 'Debug and resolve technical issues', 'Contribute to engineering best practices'],
                         skills: ['Proficiency in JavaScript/TypeScript and React', 'Experience with backend development (Node.js preferred)', 'Understanding of software design patterns', 'Experience with version control (Git)', 'Strong problem-solving skills', 'Good communication abilities'],
                         qualifications: ['Bachelor\'s degree in Computer Science or related field', '3-5 years of software development experience', 'Experience with modern web frameworks', 'Understanding of agile methodologies', 'Portfolio of completed projects'],
                         competencies: ['Software Development', 'Problem Solving', 'Collaboration', 'Collaboration', 'Communication', 'Adaptability']
                     },
                     {
                         id: 'TPL-002', title: 'Product Manager', department: 'Product', level: 'L5 - Senior', rating: 4.9, timesUsed: 189, lastUpdated: '2026-02-10',
                         summary: 'We are looking for a strategic Product Manager to drive product vision and roadmap. You will work closely with engineering, design, and business teams to deliver exceptional products.',
                         responsibilities: ['Define product vision, strategy, and roadmap', 'Gather and prioritize product requirements', 'Work with engineering to deliver features on time', 'Analyze market trends and competitive landscape', 'Define and track key product metrics', 'Communicate product plans to stakeholders'],
                         skills: ['Strong analytical and data-driven decision making', 'Excellent communication and presentation skills', 'Experience with agile/scrum methodologies', 'Proficiency in product management tools (Jira, Confluence)', 'Understanding of UX/UI principles', 'Technical aptitude and ability to work with engineers'],
                         qualifications: ['Bachelor\'s degree in Business, Computer Science, or related field', '5+ years of product management experience', 'Track record of shipping successful products', 'MBA preferred', 'Experience in SaaS or technology industry'],
                         competencies: ['Strategic Thinking', 'Data Analysis', 'Communication', 'Leadership', 'Customer Focus']
                     },
                     {
                         id: 'TPL-003', title: 'UX Designer', department: 'Design', level: 'L4 - Mid-Level', rating: 4.7, timesUsed: 156, lastUpdated: '2026-02-20',
                         summary: 'We are seeking a creative UX Designer to craft intuitive and engaging user experiences. You will collaborate with product and engineering teams to translate complex requirements into elegant designs.',
                         responsibilities: ['Create wireframes, prototypes, and high-fidelity designs', 'Conduct user research and usability testing', 'Define and maintain design systems', 'Collaborate with product managers and engineers', 'Advocate for user-centered design principles', 'Present design concepts to stakeholders'],
                         skills: ['Proficiency in Figma, Sketch, or Adobe XD', 'Strong understanding of interaction design', 'Experience with user research methodologies', 'Knowledge of accessibility standards (WCAG)', 'HTML/CSS understanding', 'Visual design and typography skills'],
                         qualifications: ['Bachelor\'s degree in Design, HCI, or related field', '3-5 years of UX design experience', 'Strong portfolio demonstrating design process', 'Experience with design systems', 'Familiarity with front-end development'],
                         competencies: ['User Empathy', 'Visual Design', 'Problem Solving', 'Collaboration', 'Communication']
                     },
                     {
                         id: 'TPL-004', title: 'Data Analyst', department: 'Analytics', level: 'L3 - Junior', rating: 4.6, timesUsed: 132, lastUpdated: '2026-02-18',
                         summary: 'We are looking for a Data Analyst to transform data into actionable insights. You will work with various teams to support data-driven decision making across the organization.',
                         responsibilities: ['Analyze large datasets to identify trends and patterns', 'Create dashboards and reports for stakeholders', 'Support A/B testing and experimentation', 'Collaborate with product and engineering teams', 'Maintain data quality and documentation', 'Present findings to non-technical audiences'],
                         skills: ['Proficiency in SQL and Python/R', 'Experience with BI tools (Tableau, Looker, Power BI)', 'Strong statistical analysis skills', 'Data visualization expertise', 'Excel/Google Sheets proficiency', 'Understanding of data warehousing concepts'],
                         qualifications: ['Bachelor\'s degree in Statistics, Mathematics, or related field', '1-3 years of data analysis experience', 'Experience with A/B testing frameworks', 'Knowledge of ETL processes', 'Strong attention to detail'],
                         competencies: ['Analytical Thinking', 'Data Visualization', 'Communication', 'Attention to Detail', 'Problem Solving']
                     },
                     {
                         id: 'TPL-005', title: 'Marketing Manager', department: 'Marketing', level: 'L5 - Senior', rating: 4.5, timesUsed: 98, lastUpdated: '2026-02-12',
                         summary: 'We are seeking an experienced Marketing Manager to lead our marketing strategy and execution. You will drive brand awareness, lead generation, and customer engagement across all channels.',
                         responsibilities: ['Develop and execute marketing strategies', 'Manage multi-channel marketing campaigns', 'Oversee content marketing and social media', 'Analyze campaign performance and ROI', 'Collaborate with sales and product teams', 'Manage marketing budget and vendor relationships'],
                         skills: ['Digital marketing expertise (SEO, SEM, social media)', 'Marketing automation tools (HubSpot, Marketo)', 'Content strategy and copywriting', 'Data analysis and reporting', 'Project management skills', 'Budget management experience'],
                         qualifications: ['Bachelor\'s degree in Marketing, Business, or related field', '5+ years of marketing experience', 'Proven track record of successful campaigns', 'Experience with B2B or SaaS marketing', 'MBA preferred'],
                         competencies: ['Strategic Planning', 'Creativity', 'Data-Driven', 'Leadership', 'Communication']
                     },
                     {
                         id: 'TPL-006', title: 'Sales Representative', department: 'Sales', level: 'L3 - Junior', rating: 4.4, timesUsed: 87, lastUpdated: '2026-02-08',
                         summary: 'We are looking for a motivated Sales Representative to join our growing sales team. You will be responsible for generating new business and building relationships with prospective clients.',
                         responsibilities: ['Prospect and qualify new sales leads', 'Conduct product demos and presentations', 'Manage sales pipeline using CRM tools', 'Negotiate contracts and close deals', 'Build and maintain client relationships', 'Meet and exceed monthly/quarterly targets'],
                         skills: ['Strong communication and negotiation skills', 'CRM proficiency (Salesforce, HubSpot)', 'Cold calling and outreach experience', 'Presentation and demo skills', 'Time management and organization', 'Understanding of sales methodologies (SPIN, Challenger)'],
                         qualifications: ['Bachelor\'s degree in Business or related field', '1-3 years of sales experience', 'Track record of meeting sales targets', 'Experience in SaaS or technology sales preferred', 'Valid driver\'s license for client visits'],
                         competencies: ['Persuasion', 'Relationship Building', 'Resilience', 'Goal Orientation', 'Communication']
                     }
                 ],
                 get filteredTemplates() {
                     return this.templates.filter(t => {
                         const matchesSearch = !this.searchQuery || t.title.toLowerCase().includes(this.searchQuery.toLowerCase()) || t.id.toLowerCase().includes(this.searchQuery.toLowerCase());
                         const matchesDept = !this.selectedDepartment || t.department === this.selectedDepartment;
                         return matchesSearch && matchesDept;
                     });
                 }
             }">

            
            <div class="bg-white rounded-[20px] border border-gray-100 shadow-sm p-6 md:p-8 mb-8">
                <div class="flex md:flex-row flex-col items-start md:items-center justify-between gap-4 mb-6">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">Template Library</h1>
                        <p class="text-gray-500">Browse and use pre-built job description templates</p>
                    </div>
                    <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                       class="inline-flex items-center justify-center h-12 px-6 rounded-lg font-medium transition-all duration-200 text-base bg-[#2F3D7E] hover:bg-[#2F3D7E]/90 text-white shadow-sm active:scale-[0.98]">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Create New JD
                    </a>
                </div>

                
                <div class="flex flex-col md:flex-row items-start md:items-center gap-4">
                    <div class="flex-1 w-full md:w-auto">
                        <div class="relative">
                            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            <input type="text" x-model="searchQuery" placeholder="Search templates..."
                                   class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]">
                        </div>
                    </div>
                    <select x-model="selectedDepartment"
                            class="border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E] bg-white min-w-[180px]">
                        <option value="">All Departments</option>
                        <option value="Engineering">Engineering</option>
                        <option value="Product">Product</option>
                        <option value="Design">Design</option>
                        <option value="Marketing">Marketing</option>
                        <option value="Sales">Sales</option>
                        <option value="Analytics">Analytics</option>
                    </select>
                </div>
            </div>

            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <template x-for="template in filteredTemplates" :key="template.id">
                    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 hover:shadow-md transition-shadow">
                        
                        <div class="flex items-start justify-between mb-4">
                            <h3 class="text-lg font-bold text-gray-900" x-text="template.title"></h3>
                            <div class="flex items-center gap-1 shrink-0">
                                <svg class="w-4 h-4 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                </svg>
                                <span class="text-sm font-semibold text-orange-500" x-text="template.rating"></span>
                            </div>
                        </div>

                        
                        <div class="flex items-center gap-2 mb-6">
                            <span class="inline-flex items-center px-2.5 py-1 bg-blue-50 text-[#2F3D7E] text-xs font-semibold rounded-md border border-blue-100" x-text="template.id"></span>
                            <span class="inline-flex items-center px-2.5 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-md border border-gray-200" x-text="template.department"></span>
                        </div>

                        
                        <div class="space-y-3 mb-6">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">Level:</span>
                                <span class="font-medium text-gray-900" x-text="template.level"></span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">Times Used:</span>
                                <span class="font-medium text-gray-900" x-text="template.timesUsed"></span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-500">Last Updated:</span>
                                <span class="font-medium text-gray-900" x-text="template.lastUpdated"></span>
                            </div>
                        </div>

                        
                        <div class="flex items-center gap-3">
                            <button @click="previewModal = { open: true, template: template }"
                                    class="flex-1 inline-flex items-center justify-center gap-2 h-10 px-4 rounded-lg text-sm font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                Preview
                            </button>
                            <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                               class="flex-1 inline-flex items-center justify-center gap-2 h-10 px-4 rounded-lg text-sm font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                                </svg>
                                Use Template
                            </a>
                        </div>
                    </div>
                </template>
            </div>

            
            <div x-show="previewModal.open" x-cloak
                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0">
                <div class="fixed inset-0 bg-black/50" @click="previewModal.open = false"></div>

                <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
                     @click.away="previewModal.open = false">
                    <div class="p-6 md:p-8">
                        
                        <div class="flex items-start justify-between mb-1">
                            <div>
                                <h3 class="text-xl font-bold text-gray-900" x-text="previewModal.template?.title + ' Template'"></h3>
                                <p class="text-sm text-gray-500">Preview the content of this template before using it</p>
                            </div>
                            <button @click="previewModal.open = false" class="text-gray-400 hover:text-gray-600 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>

                        
                        <div class="flex items-center gap-3 mt-4 mb-6">
                            <button @click="previewModal.open = false"
                                    class="inline-flex items-center justify-center h-10 px-6 rounded-lg text-sm font-medium text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
                                Close
                            </button>
                            <a href="<?php echo e(route('dashboard.job-descriptions.create')); ?>"
                               class="inline-flex items-center justify-center gap-2 h-10 px-6 rounded-lg text-sm font-medium text-white bg-[#2F3D7E] hover:bg-[#1E2858] transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
                                </svg>
                                Use This Template
                            </a>
                        </div>

                        
                        <div class="space-y-6">
                            <div>
                                <h4 class="text-base font-bold text-gray-900 mb-2">Role Summary</h4>
                                <p class="text-sm text-gray-600 leading-relaxed" x-text="previewModal.template?.summary"></p>
                            </div>

                            <div>
                                <h4 class="text-base font-bold text-gray-900 mb-3">Key Responsibilities</h4>
                                <ul class="space-y-2">
                                    <template x-for="(item, i) in previewModal.template?.responsibilities" :key="i">
                                        <li class="flex items-start gap-2 text-sm text-gray-600">
                                            <span class="w-1.5 h-1.5 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                            <span x-text="item"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>

                            <div>
                                <h4 class="text-base font-bold text-gray-900 mb-3">Required Skills</h4>
                                <ul class="space-y-2">
                                    <template x-for="(item, i) in previewModal.template?.skills" :key="i">
                                        <li class="flex items-start gap-2 text-sm text-gray-600">
                                            <span class="w-1.5 h-1.5 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                            <span x-text="item"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>

                            <div>
                                <h4 class="text-base font-bold text-gray-900 mb-3">Qualifications</h4>
                                <ul class="space-y-2">
                                    <template x-for="(item, i) in previewModal.template?.qualifications" :key="i">
                                        <li class="flex items-start gap-2 text-sm text-gray-600">
                                            <span class="w-1.5 h-1.5 bg-[#2F3D7E] rounded-full mt-1.5 shrink-0"></span>
                                            <span x-text="item"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>

                            <div>
                                <h4 class="text-base font-bold text-gray-900 mb-3">Competencies</h4>
                                <div class="flex flex-wrap gap-2">
                                    <template x-for="(comp, i) in previewModal.template?.competencies" :key="i">
                                        <span class="inline-flex items-center px-3 py-1.5 bg-blue-50 text-[#2F3D7E] rounded-full text-xs font-medium border border-blue-100" x-text="comp"></span>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.dashboard', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/ratemypay_dev/resources/views/dashboard/job-descriptions/templates.blade.php ENDPATH**/ ?>