Dynamic lightbox navigation injection

src/lightbox/index.html

@@ -25,10 +25,12 @@
 				<tp-lightbox-content></tp-lightbox-content>
 				<tp-lightbox-count format="$current / $total"></tp-lightbox-count>
 				<tp-lightbox-nav>
-					<tp-lightbox-nav-item><button>1</button></tp-lightbox-nav-item>
-					<tp-lightbox-nav-item><button>2</button></tp-lightbox-nav-item>
-					<tp-lightbox-nav-item><button>3</button></tp-lightbox-nav-item>
-					<tp-lightbox-nav-item><button>4</button></tp-lightbox-nav-item>
+					<template>
+						<tp-lightbox-nav-item>
+							<button>
+							</button>
+						</tp-lightbox-nav-item>
+					</template>
 				</tp-lightbox-nav>
 			</dialog>
 		</tp-lightbox>

src/lightbox/tp-lightbox-nav.ts

@@ -1,5 +1,56 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+
 /**
  * TP Lightbox Nav.
  */
 export class TPLightboxNavElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected template: HTMLTemplateElement | null = null;
+	protected lightbox : TPLightboxElement | null;
+
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		// Initialize parent.
+		super();
+
+		// Initialize properties.
+		this.template = this.querySelector( 'template' );
+		this.lightbox = this.closest( 'tp-lightbox' );
+
+		// Add event listener.
+		this.lightbox?.addEventListener( 'template-set', this.setTemplate.bind( this ) );
+	}
+
+	/**
+	 * Set the template.
+	 */
+	setTemplate(): void {
+		// Bail if no template.
+		if ( ! this.template ) {
+			// Exit.
+			return;
+		}
+
+		// Total slides.
+		const totalSlides = Number( this.lightbox?.getAttribute( 'total' ) ?? 0 );
+
+		// Clear the navigation.
+		this.innerHTML = '';
+
+		// Append the navigation items.
+		for ( let i = 0; i < totalSlides; i++ ) {
+			// Clone the template.
+			const navItem = this.template.content.cloneNode( true );
+
+			// Append the clone.
+			this.appendChild( navItem );
+		}
+	}
 }