{% extends "base.html" %}

{% block body %}

<div style="margin-bottom: 40px;">
	<h2>Create New Project</h2>
	<form action="/projects/add-project" method="POST" class="account-input">
		<input type="text" name="project_name" placeholder="Project Name" required>
		<button type="submit">Create Project</button>
	</form>
</div>

<div>
	<h2>Create New Version</h2>
	<form action="/projects/add-version" method="POST" class="account-input">
		<label style="display:block; margin-bottom:5px; font-weight:600;">Project Name:</label>
		<select name="project_id" style="display: block; margin-bottom: 15px; min-width: 250px; background-color: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border); padding: 8px; border-radius: 6px;" required>
			<option value="" disabled selected>Select project...</option>
			{% for project in projects %}
				<option value="{{ project.project_id }}">{{ project.project_name }}</option>
			{% endfor %}
		</select>

		<label style="display:block; margin-bottom:5px; font-weight:600;">Semantic Versioning Configuration:</label>
		<div>
			<input type="number" name="major" placeholder="Major" min="0" style="min-width: 70px; width: 70px;" required>
			<input type="number" name="minor" placeholder="Minor" min="0" style="min-width: 70px; width: 70px;" required>
			<input type="number" name="micro" placeholder="Micro" min="0" style="min-width: 70px; width: 70px;" required>
		</div>

		<button type="submit">Create Version</button>
	</form>
</div>

<div class="display-panel">
<h2>Project Registry</h2>

{% for project in projects %}
<div class="project-card" style="background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 25px;">
	<h3 style="margin-top: 0; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 10px;">
		{{ project.project_name }}
	</h3>
	
	<table style="width: 100%;">
		<thead>
			<tr style="color: var(--text-muted); font-size: 0.85rem;">
				<th style="padding: 8px;">Version</th>
				<th style="padding: 8px;">Status</th>
				<th style="padding: 8px; text-align: right;">Visibility</th>
			</tr>
		</thead>
		<tbody>
			<!-- Loop through the project's versions sorted by semantic order using its relation helper -->
			{% for version in project.versions | sort(attribute='project_version_major', reverse=True) %}
			<tr style="border-top: 1px solid var(--border); opacity: {% if version.is_hidden %}0.5{% else %}1{% endif %};">
				<td style="padding: 10px 8px; font-weight: 500;">
					v{{ version.project_version_major }}.{{ version.project_version_minor }}.{{ version.project_version_micro }}
				</td>
				<td style="padding: 10px 8px; font-weight: 500;">
					{% if version.is_hidden %}
						<span style="font-size: 0.75rem; background-color: #ef4444; color: white; padding: 2px 6px; border-radius: 4px; margin-left: 10px;">HIDDEN</span>
					{% else %}
						<span style="font-size: 0.75rem; background-color: #22c55e; color: white; padding: 2px 6px; border-radius: 4px; margin-left: 10px;">ACTIVE</span>
					{% endif %}
				</td>
				<td style="padding: 10px 8px; text-align: right;">
					<!-- Uses your custom Segmented Control layout block for status transitions -->
					<form action="/projects/toggle-version-hidden/{{ version.project_version_id }}" method="POST">
						<div class="segmented-control">
							<input type="checkbox" name="visibility_status" id="vis_{{ version.project_version_id }}_active" {% if version.is_hidden %}checked{% endif %} onchange="this.form.submit()">
							<label for="vis_{{ version.project_version_id }}_active">{% if version.is_hidden %}Show{% else %}Hide{% endif %}</label>
						</div>
					</form>
				</td>
			</tr>
			{% else %}
			<tr>
				<td colspan="2" style="padding: 15px 8px; color: var(--text-muted); font-style: italic;">No semantic versions published for this asset profile.</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>
{% else %}
<p style="color: var(--text-muted); background-color: var(--bg-surface); padding: 20px; border-radius: 6px; border: 1px solid var(--border); text-align: center;">
	No tracked projects found in database engine. Use creation module to register systems.
</p>
{% endfor %}

{% endblock %}