export const widgetTemplates = {
layout: {
dashboardLayout: `
<div class="d-flex" style="min-height: 100vh;">
<nav class="bg-dark text-white p-3" style="width: 220px;">
<h4 class="mb-4">Brand</h4>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a class="nav-link text-white" href="#">Dashboard</a></li>
<li class="nav-item mb-2"><a class="nav-link text-white" href="#">Users</a></li>
<li class="nav-item mb-2"><a class="nav-link text-white" href="#">Reports</a></li>
<li class="nav-item mb-2"><a class="nav-link text-white" href="#">Settings</a></li>
</ul>
</nav>
<div class="flex-grow-1">
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Dashboard</span>
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
</nav>
<div class="container-fluid p-4">
<h2>Welcome!</h2>
<p>This is a dashboard layout inspired by premium admin templates.</p>
</div>
</div>
</div>
`.trim(),
},
cards: {
card: `
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Card Title</h5>
</div>
<div class="card-body">
<p class="card-text">This is a Bootstrap card component generated by MCP Server.</p>
</div>
</div>
`.trim(),
profileCard: `
<div class="card shadow-sm" style="max-width: 350px;">
<div class="card-body text-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-circle mb-3" width="80" height="80" alt="Profile">
<h5 class="card-title mb-0">Alex Johnson</h5>
<div class="text-muted mb-2">Product Manager</div>
<p class="card-text">Passionate about building great products and teams.</p>
<a href="#" class="btn btn-primary btn-sm">Contact</a>
</div>
</div>
`.trim(),
statsCards: `
<div class="row g-4">
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="card-title text-muted">Users</h6>
<h2 class="card-text">1,245</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="card-title text-muted">Revenue</h6>
<h2 class="card-text">$34,000</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="card-title text-muted">Orders</h6>
<h2 class="card-text">320</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="card-title text-muted">Tickets</h6>
<h2 class="card-text">18</h2>
</div>
</div>
</div>
</div>
`.trim(),
},
tables: {
table: `
<table class="table table-striped table-bordered">
<thead class="table-primary">
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
`.trim(),
dataTable: `
<div class="card shadow-sm">
<div class="card-header bg-white">
<h5 class="mb-0">Recent Transactions</h5>
</div>
<div class="card-body p-0">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>#</th>
<th>User</th>
<th>Date</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jane Doe</td>
<td>2025-08-09</td>
<td><span class="badge bg-success">Paid</span></td>
<td>$120.00</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>2025-08-08</td>
<td><span class="badge bg-warning text-dark">Pending</span></td>
<td>$80.00</td>
</tr>
</tbody>
</table>
</div>
</div>
`.trim(),
userList: `
<div class="card shadow-sm">
<div class="card-header bg-white">
<h5 class="mb-0">Users</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex align-items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-circle me-2" width="32" height="32" alt="User">
<span>Alex Johnson</span>
<span class="badge bg-success ms-auto">Online</span>
</li>
<li class="list-group-item d-flex align-items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="rounded-circle me-2" width="32" height="32" alt="User">
<span>Jane Doe</span>
<span class="badge bg-secondary ms-auto">Offline</span>
</li>
</ul>
</div>
`.trim(),
},
forms: {
form: `
<form class="p-4 border rounded bg-light">
<div class="mb-3">
<label for="input1" class="form-label">Label</label>
<input type="text" class="form-control" id="input1" placeholder="Enter value">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`.trim(),
},
notifications: {
alert: `
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This is a Bootstrap alert widget.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`.trim(),
toast: `
<div class="toast show align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, this is a Bootstrap toast message!
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
`.trim(),
notificationWidget: `
<div class="alert alert-info d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
<div>
You have <strong>3 new notifications</strong>!
</div>
</div>
`.trim(),
successAlert: `
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Success!</strong> Your operation was completed successfully.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`.trim(),
errorAlert: `
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>Error!</strong> Something went wrong. Please try again.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`.trim(),
infoAlert: `
<div class="alert alert-info alert-dismissible fade show" role="alert">
<strong>Info:</strong> This is an informational message.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
`.trim(),
warningToast: `
<div class="toast show align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<strong>Warning:</strong> Please check your input.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
`.trim(),
},
modals: {
basicModal: `
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
Launch Basic Modal
</button>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="basicModalLabel">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is a basic Bootstrap modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
`.trim(),
confirmationModal: `
<!-- Button trigger modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmModal">
Delete Item
</button>
<!-- Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Confirm Delete</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to delete this item? This action cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
`.trim(),
largeModal: `
<!-- Button trigger modal -->
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#largeModal">
Launch Large Modal
</button>
<!-- Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is a large Bootstrap modal for displaying more content.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
`.trim(),
},
utilities: {
spinner: `
<div class="d-flex justify-content-center align-items-center" style="height: 100px;">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
`.trim(),
badge: `
<span class="badge bg-success">New</span>
`.trim(),
breadcrumb: `
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
`.trim(),
pagination: `
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
`.trim(),
},
navigation: {
tabs: `
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Profile</button>
</li>
</ul>
<div class="tab-content p-3 border border-top-0" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel">Home tab content...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">Profile tab content...</div>
</div>
`.trim(),
accordion: `
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show">
<div class="accordion-body">
This is the first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
This is the second item's accordion body.
</div>
</div>
</div>
</div>
`.trim(),
modal: `
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Modal body content goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
`.trim(),
},
progress: {
progressBar: `
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
`.trim(),
},
timeline: {
timeline: `
<ul class="timeline">
<li>
<span class="timeline-date">2025-08-09</span>
<span class="timeline-content">User registered</span>
</li>
<li>
<span class="timeline-date">2025-08-10</span>
<span class="timeline-content">Order placed</span>
</li>
</ul>
<style>
.timeline { list-style: none; padding: 0; }
.timeline li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.timeline-date { font-weight: bold; margin-right: 10px; }
.timeline-content { color: #555; }
</style>
`.trim(),
activityFeed: `
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<span class="badge bg-success me-3"> </span>
<div>
<strong>New user registered</strong>
<div class="text-muted small">2 minutes ago</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<span class="badge bg-primary me-3"> </span>
<div>
<strong>Order #1234 placed</strong>
<div class="text-muted small">10 minutes ago</div>
</div>
</li>
<li class="list-group-item d-flex align-items-center">
<span class="badge bg-warning me-3"> </span>
<div>
<strong>Payment pending</strong>
<div class="text-muted small">1 hour ago</div>
</div>
</li>
</ul>
`.trim(),
},
chat: {
chatWidget: `
<div class="card shadow-sm" style="max-width:400px;">
<div class="card-header bg-primary text-white">Team Chat</div>
<div class="card-body" style="height:200px; overflow-y:auto;">
<div class="d-flex mb-2">
<div class="me-2">
<span class="badge bg-secondary">Alex</span>
</div>
<div class="bg-light rounded p-2 flex-fill">Hi team, any updates?</div>
</div>
<div class="d-flex mb-2 flex-row-reverse">
<div class="ms-2">
<span class="badge bg-info">You</span>
</div>
<div class="bg-primary text-white rounded p-2 flex-fill">Working on it!</div>
</div>
</div>
<div class="card-footer p-2">
<input type="text" class="form-control" placeholder="Type a message...">
</div>
</div>
`.trim(),
},
kanban: {
kanbanBoard: `
<div class="row g-2">
<div class="col">
<div class="card">
<div class="card-header bg-light">To Do</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Design login page</li>
<li class="list-group-item">Setup database</li>
</ul>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header bg-light">In Progress</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">API integration</li>
</ul>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header bg-light">Done</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Wireframes</li>
</ul>
</div>
</div>
</div>
`.trim(),
},
calendar: {
calendarWidget: `
<div class="card shadow-sm" style="max-width: 350px;">
<div class="card-header bg-white">
<h5 class="mb-0">Calendar</h5>
</div>
<div class="card-body">
<table class="table table-bordered text-center mb-0">
<thead>
<tr>
<th colspan="7" class="bg-light">August 2025</th>
</tr>
<tr>
<th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
</thead>
<tbody>
<tr><td></td><td></td><td></td><td></td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>
<tr><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>
<tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
</tbody>
</table>
</div>
</div>
`.trim(),
},
charts: {
chartPlaceholder: `
<div class="card shadow-sm">
<div class="card-header bg-white">
<h5 class="mb-0">Chart Widget</h5>
</div>
<div class="card-body">
<p>Add your chart here using ngx-charts, Chart.js, or any Angular chart library.</p>
<div style="height:200px; background:#f8f9fa; border-radius:8px; display:flex; align-items:center; justify-content:center;">
<span class="text-muted">[Chart Placeholder]</span>
</div>
</div>
</div>
`.trim(),
},
default: { default: `<p>Component works!</p>` },
};