<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Advanced Template Features</title>
<link href="showcase.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Advanced Template Features</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<section class="welcome">
<h2>Welcome Message</h2>
<p>Welcome to Advanced Template Features! This page demonstrates all template features.</p>
</section>
<section class="dynamic-attributes">
<h2>Dynamic Attributes</h2>
<div class="card status-active" id="card-123">
<p>This div has dynamically generated class and id attributes</p>
<p>ID: 123, Status: active</p>
</div>
</section>
<section class="optional-attributes">
<h2>Optional Attributes</h2>
<button>
Click me (disabled based on condition)
</button>
<button disabled>
Click me (disaabled based on reversed condition)
</button>
<input type="text" value="Sample Input">
</section>
<section class="items-list">
<h2>Items List (tpl-repeat directive)</h2>
<div>
<ul>
<li>
<span>1. Laptop</span>
<span class="badge in-stock">✓ In Stock</span>
<span> - $999.99</span>
</li><li>
<span>2. Keyboard</span>
<span class="badge in-stock">✓ In Stock</span>
<span> - $79.99</span>
</li><li>
<span>3. Mouse</span>
<span class="badge out-of-stock">✗ Out of Stock</span>
<span> - $49.99</span>
</li><li>
<span>4. Monitor</span>
<span class="badge in-stock">✓ In Stock</span>
<span> - $299.99</span>
</li><li>
<span>5. Headphones</span>
<span class="badge out-of-stock">✗ Out of Stock</span>
<span> - $149.99</span>
</li>
</ul>
</div>
</section>
<section class="user-section">
<h2>User Information</h2>
<div class="user">
<div class="user_card">
<div class="card">
<div class="card-header" data-info='{"id": "card-header", "class": "card-header"}'>
<h3>Alice</h3>
</div>
<div class="card-body">
<p><strong>Username:</strong> <span>Alice</span></p>
<p><strong>User ID:</strong> <span>42</span></p>
<p><strong>Email:</strong> <span>alice@example.com</span></p>
<div>
<span class="badge admin-badge">Administrator</span>
</div>
</div>
<div class="card-footer">
<small>Component rendered</small> via tpl-template
</div>
</div>
</div>
</div>
</section>
<section class="nested-template">
<h2>Nested Template Component</h2>
<div>
<div class="card">
<div class="card-header" data-info='{"id": "card-header", "class": "card-header"}'>
<h3>Card Title</h3>
</div>
<div class="card-body">
<p>This is content from the card component</p>
</div>
<div class="card-footer">
<small>Component rendered</small> via tpl-template
</div>
</div>
</div>
</section>
<section class="multiple-components">
<h2>Multiple Component Instances</h2>
<div class="cards-grid">
<div>
<div>
<div class="card">
<div class="card-header" data-info='{"id": "card-header", "class": "card-header"}'>
<h3>Laptop</h3>
</div>
<div class="card-body">
<p>Price: $999.99</p>
</div>
<div class="card-footer">
<small>Component rendered</small> via tpl-template
</div>
</div>
</div>
</div><div>
<div>
<div class="card">
<div class="card-header" data-info='{"id": "card-header", "class": "card-header"}'>
<h3>Keyboard</h3>
</div>
<div class="card-body">
<p>Price: $79.99</p>
</div>
<div class="card-footer">
<small>Component rendered</small> via tpl-template
</div>
</div>
</div>
</div><div>
<div>
<div class="card">
<div class="card-header" data-info='{"id": "card-header", "class": "card-header"}'>
<h3>Mouse</h3>
</div>
<div class="card-body">
<p>Price: $49.99</p>
</div>
<div class="card-footer">
<small>Component rendered</small> via tpl-template
</div>
</div>
</div>
</div>
</div>
</section>
<section class="complex-expressions">
<h2>Complex Expressions</h2>
<div class="status-active" data-count="5">
<p>Total items: 5</p>
<p>Status: Full Mode</p>
</div>
</section>
<section class="void-elements">
<h2>Self-closing Elements</h2>
<img alt="Alice" height="100" src="/images/user-42.jpg" width="100">
<br>
<input checked id="admin-check" type="checkbox">
<label for="admin-check">Is Admin</label>
</section>
<section class="combined-features">
<h2>Combined Features Demo</h2>
<div>
<div>
<div class="product-card product-1" data-featured>
<h3>Laptop</h3>
<p>$999.99</p>
<button>Add to Cart</button>
</div>
</div><div>
<div class="product-card product-2">
<h3>Keyboard</h3>
<p>$79.99</p>
<button>Add to Cart</button>
</div>
</div><div>
<div class="product-card product-4" data-featured>
<h3>Monitor</h3>
<p>$299.99</p>
<button>Add to Cart</button>
</div>
</div>
</div>
</section>
<section class="childrens-as-args">
<h2>Combined Features Demo</h2>
<div>
<h2 class="list-title">ListTitle</h2>
<ul class="list-component">
<li>
<h2 class="list-title">ListTitle</h2>
<ul class="list-component">
<li>
<div>nested 1</div>
</li><li>
<div>nested 2</div>
</li>
</ul>
</li><li>
<div>a</div>
</li><li>
<div>b</div>
</li>
</ul>
</div>
</section>
<footer>
<p>Template System Showcase - All features demonstrated</p>
<p>Rendered with 5 items</p>
</footer>
</div>
</body>
</html>