frontend/src/components/agent/CreateAgentModal.vue

<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="saap-heading-2">Create New Agent</h2>
        <button @click="$emit('close')" class="close-button">
          <XMarkIcon class="w-6 h-6" />
        </button>
      </div>
      
      <div class="modal-body">
        <p class="saap-body text-saap-gray-600 mb-6">
          Create a new agent from templates or start from scratch.
        </p>
        
        <!-- Template Selection -->
        <div class="template-grid">
          <button 
            v-for="template in templates"
            :key="template.id"
            @click="createFromTemplate(template.id)"
            class="template-card"
          >
            <div class="template-avatar" :style="{ backgroundColor: template.color }">
              {{ template.name.charAt(0) }}
            </div>
            <h3 class="template-name">{{ template.name }}</h3>
            <p class="template-description">{{ template.description }}</p>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'

// Emits
const emit = defineEmits(['close', 'agent-created'])

// Templates data
const templates = ref([
  {
    id: 'jane_alesi',
    name: 'Jane Alesi',
    color: '#8B5CF6',
    description: 'Lead AI Architect & Coordinator'
  },
  {
    id: 'john_alesi', 
    name: 'John Alesi',
    color: '#14B8A6',
    description: 'Software Developer & AGI Expert'
  },
  {
    id: 'lara_alesi',
    name: 'Lara Alesi',
    color: '#EC4899',
    description: 'Medical AI Assistant'
  }
])

// Methods
const createFromTemplate = (templateId) => {
  console.log('Creating agent from template:', templateId)
  // TODO: Implement agent creation
  emit('agent-created')
  emit('close')
}
</script>

<style scoped>
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-2xl w-full m-4 max-h-[90vh] overflow-auto;
}

.modal-header {
  @apply flex items-center justify-between p-6 border-b border-saap-gray-200;
}

.close-button {
  @apply text-saap-gray-500 hover:text-saap-gray-700 transition-colors;
}

.modal-body {
  @apply p-6;
}

.template-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-4;
}

.template-card {
  @apply p-4 border border-saap-gray-200 rounded-lg hover:border-saap-primary-300;
  @apply transition-all duration-200 text-center hover:shadow-md;
}

.template-avatar {
  @apply w-12 h-12 rounded-full mx-auto mb-3 flex items-center justify-center;
  @apply text-white font-bold text-lg;
}

.template-name {
  @apply saap-heading-3 mb-2;
}

.template-description {
  @apply saap-body-small text-saap-gray-600;
}
</style>