document-processor/app/templates/presets/index.html

150 lines
6.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Presets</title>
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
<div class="app-shell" id="app-shell">
{% include "partials/sidebar.html" %}
<main class="main">
<div class="topbar">
<div>
<h1 class="page-title">Presets</h1>
<p class="page-subtitle">Create reusable defaults for additional fields.</p>
</div>
</div>
<div class="card">
<h2 class="card-title">{% if editing %}Edit preset{% else %}Create preset{% endif %}</h2>
<form method="post" action="{% if editing %}/presets/{{ editing.id }}/update{% else %}/presets/create{% endif %}">
<div class="form-grid">
<div class="form-field">
<label>Preset name</label>
<input type="text" name="name" value="{{ form_values.name }}" required>
</div>
<div class="form-field">
<label>Primary owner</label>
<input type="text" name="owner_primary" value="{{ form_values.owner_primary }}">
</div>
<div class="form-field">
<label>Secondary owner</label>
<input type="text" name="owner_secondary" value="{{ form_values.owner_secondary }}">
</div>
<div class="form-field">
<label>Paid by person</label>
<input type="text" name="paid_by_person" value="{{ form_values.paid_by_person }}">
</div>
<div class="form-field full">
<label>Covered people</label>
<input type="text" name="covered_people" value="{{ form_values.covered_people }}" placeholder="Full Name, Full Name">
</div>
<div class="form-field full">
<label>Attendees</label>
<input type="text" name="attendees" value="{{ form_values.attendees }}" placeholder="Full Name, Full Name">
</div>
<div class="form-field full">
<label>Occasion note</label>
<input type="text" name="occasion_note" value="{{ form_values.occasion_note }}">
</div>
<div class="form-field">
<label><input type="checkbox" name="is_shared_expense" value="1" {% if form_values.is_shared_expense %}checked{% endif %}> Shared expense</label>
</div>
<div class="form-field full">
<label>Reimbursement expected from</label>
<input type="text" name="reimbursement_expected_from" value="{{ form_values.reimbursement_expected_from }}" placeholder="Full Name, Full Name">
</div>
<div class="form-field">
<label>Reimbursement paid by</label>
<input type="text" name="reimbursement_paid_by" value="{{ form_values.reimbursement_paid_by }}">
</div>
<div class="form-field">
<label>Reimbursement paid to</label>
<input type="text" name="reimbursement_paid_to" value="{{ form_values.reimbursement_paid_to }}">
</div>
<div class="form-field full">
<label>Reimbursement note</label>
<textarea name="reimbursement_note" rows="3">{{ form_values.reimbursement_note }}</textarea>
</div>
</div>
<div class="button-row" style="margin-top: 1rem;">
<button class="primary" type="submit">{% if editing %}Save preset{% else %}Create preset{% endif %}</button>
{% if editing %}
<a class="button-link" href="/presets/">Cancel</a>
{% endif %}
</div>
</form>
</div>
<div class="card">
<h2 class="card-title">Existing presets</h2>
{% if presets %}
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>Primary owner</th>
<th>Secondary owner</th>
<th>Paid by</th>
<th>Covered people</th>
<th>Attendees</th>
<th>Shared</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for preset in presets %}
<tr>
<td>{{ preset.name }}</td>
<td>{{ preset.owner_primary or "" }}</td>
<td>{{ preset.owner_secondary or "" }}</td>
<td>{{ preset.paid_by_person or "" }}</td>
<td>{{ preset.covered_people or [] }}</td>
<td>{{ preset.attendees or [] }}</td>
<td>{{ "Yes" if preset.is_shared_expense else "No" }}</td>
<td>
<div class="button-row">
<a class="button-link" href="/presets/?edit_id={{ preset.id }}">Edit</a>
<form method="post" action="/presets/{{ preset.id }}/delete">
<button class="danger" type="submit">Delete</button>
</form>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="empty-state">No presets yet.</p>
{% endif %}
</div>
</main>
</div>
<script>
(function () {
const appShell = document.getElementById("app-shell");
const menuToggle = document.getElementById("menu-toggle");
if (appShell && menuToggle) {
menuToggle.addEventListener("click", function () {
appShell.classList.toggle("nav-open");
});
menuToggle.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
appShell.classList.toggle("nav-open");
}
});
}
})();
</script>
</body>
</html>