electronics-inventory/public/templates.html

<!-- ===== COMPONENTS SECTION ===== -->
<template id="t-section-components">
	<section class="section" id="section-components">
		<div class="section-toolbar">
			<input type="search" id="component-search" class="search-input" placeholder="Search components…">
			<button class="btn btn-primary" id="btn-add-component">+ Add component</button>
		</div>
		<div id="component-list" class="item-list"></div>
	</section>
</template>

<template id="t-component-row">
	<div class="component-row">
		<div class="component-main">
			<div class="component-header">
				<span class="component-name"></span>
				<span class="component-description"></span>
			</div>
			<div class="component-fields"></div>
			<div class="component-locations"></div>
		</div>
		<div class="row-actions">
			<button class="btn-icon btn-edit" title="Edit">✎</button>
			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
		</div>
	</div>
</template>

<template id="t-field-tag">
	<span class="field-tag"><span class="tag-name"></span><span class="tag-value"></span></span>
</template>

<template id="t-location-badge">
	<span class="location-badge"><span class="badge-icon"></span><span class="badge-text"></span></span>
</template>

<!-- ===== INVENTORY SECTION ===== -->
<template id="t-section-inventory">
	<section class="section" id="section-inventory">
		<div class="section-toolbar">
			<input type="search" id="inventory-search" class="search-input" placeholder="Search by component or location…">
			<select id="inventory-type-filter" class="filter-select">
				<option value="">All types</option>
				<option value="physical">Physical</option>
				<option value="bom">BOM / Drawing</option>
				<option value="digital">Digital / Note</option>
			</select>
			<button class="btn btn-primary" id="btn-add-inventory">+ Add entry</button>
		</div>
		<div class="table-header inventory-grid">
			<span>Component</span>
			<span>Type</span>
			<span>Location / Reference</span>
			<span>Qty</span>
			<span>Notes</span>
			<span></span>
		</div>
		<div id="inventory-list" class="item-list"></div>
	</section>
</template>

<template id="t-inventory-row">
	<div class="inventory-row inventory-grid">
		<span class="inv-component-name"></span>
		<span class="inv-type-badge"></span>
		<span class="inv-location-ref"></span>
		<span class="inv-quantity"></span>
		<span class="inv-notes"></span>
		<span class="row-actions">
			<button class="btn-icon btn-edit" title="Edit">✎</button>
			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
		</span>
	</div>
</template>

<!-- ===== FIELDS SECTION ===== -->
<template id="t-section-fields">
	<section class="section" id="section-fields">
		<div class="section-toolbar">
			<span class="section-note">Master field index — fields available for all components</span>
			<button class="btn btn-primary" id="btn-add-field">+ Add field</button>
		</div>
		<div class="table-header fields-grid">
			<span>Field name</span>
			<span>Unit</span>
			<span>Description</span>
			<span></span>
		</div>
		<div id="field-list" class="item-list"></div>
	</section>
</template>

<template id="t-field-row">
	<div class="field-def-row fields-grid">
		<span class="fdef-name"></span>
		<span class="fdef-unit"></span>
		<span class="fdef-description"></span>
		<span class="row-actions">
			<button class="btn-icon btn-edit" title="Edit">✎</button>
			<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
		</span>
	</div>
</template>

<!-- ===== DIALOG: COMPONENT ===== -->
<template id="t-dialog-component">
	<dialog id="dialog-component" class="app-dialog">
		<h2 class="dialog-title"></h2>
		<form method="dialog" id="form-component">
			<div class="form-row">
				<label for="c-name">Name</label>
				<input type="text" id="c-name" required autocomplete="off">
			</div>
			<div class="form-row">
				<label for="c-description">Description</label>
				<input type="text" id="c-description" autocomplete="off">
			</div>
			<div class="form-section-label">Field values</div>
			<div id="c-field-rows"></div>
			<div class="form-row add-field-row">
				<select id="c-add-field-select" class="filter-select">
					<option value="">— add a field —</option>
				</select>
			</div>
			<div class="dialog-actions">
				<button type="button" class="btn btn-secondary" id="c-cancel">Cancel</button>
				<button type="submit" class="btn btn-primary" id="c-save">Save</button>
			</div>
		</form>
	</dialog>
</template>

<!-- ===== DIALOG: INVENTORY ENTRY ===== -->
<template id="t-dialog-inventory">
	<dialog id="dialog-inventory" class="app-dialog">
		<h2 class="dialog-title"></h2>
		<form method="dialog" id="form-inventory">
			<div class="form-row">
				<label for="i-component">Component</label>
				<select id="i-component" required class="filter-select wide">
					<option value="">— select component —</option>
				</select>
			</div>
			<div class="form-row">
				<label for="i-type">Location type</label>
				<select id="i-type" required class="filter-select wide">
					<option value="physical">Physical location</option>
					<option value="bom">BOM / Drawing</option>
					<option value="digital">Digital / Note</option>
				</select>
			</div>
			<div class="form-row">
				<label for="i-ref" id="i-ref-label">Location reference</label>
				<input type="text" id="i-ref" autocomplete="off">
			</div>
			<div class="form-row">
				<label for="i-qty">Quantity</label>
				<input type="text" id="i-qty" autocomplete="off" placeholder="e.g. 10, ~50, see BOM">
			</div>
			<div class="form-row">
				<label for="i-notes">Notes</label>
				<input type="text" id="i-notes" autocomplete="off">
			</div>
			<div class="dialog-actions">
				<button type="button" class="btn btn-secondary" id="i-cancel">Cancel</button>
				<button type="submit" class="btn btn-primary" id="i-save">Save</button>
			</div>
		</form>
	</dialog>
</template>

<!-- ===== DIALOG: FIELD DEFINITION ===== -->
<template id="t-dialog-field">
	<dialog id="dialog-field" class="app-dialog">
		<h2 class="dialog-title"></h2>
		<form method="dialog" id="form-field">
			<div class="form-row">
				<label for="f-name">Field name</label>
				<input type="text" id="f-name" required autocomplete="off" placeholder="e.g. capacitance, mouser_order_no">
			</div>
			<div class="form-row">
				<label for="f-unit">Unit <span class="label-hint">(optional, informational)</span></label>
				<input type="text" id="f-unit" autocomplete="off" placeholder="e.g. F, V, Ω, mm">
			</div>
			<div class="form-row">
				<label for="f-description">Description</label>
				<input type="text" id="f-description" autocomplete="off">
			</div>
			<div class="dialog-actions">
				<button type="button" class="btn btn-secondary" id="f-cancel">Cancel</button>
				<button type="submit" class="btn btn-primary" id="f-save">Save</button>
			</div>
		</form>
	</dialog>
</template>

<!-- ===== DIALOG: CONFIRM ===== -->
<template id="t-dialog-confirm">
	<dialog id="dialog-confirm" class="app-dialog app-dialog-sm">
		<h2 class="dialog-title">Confirm</h2>
		<p id="confirm-message" class="confirm-message"></p>
		<div class="dialog-actions">
			<button type="button" class="btn btn-secondary" id="confirm-cancel">Cancel</button>
			<button type="button" class="btn btn-danger" id="confirm-ok">Delete</button>
		</div>
	</dialog>
</template>