{% extends 'base1.html.twig' %}

{% block content %}
	<div class="content">
		<div class="row">
			<div class="col-sm-6">
				<div class="card">
					<div class="card-header">
						<h3>Categories</h3>
					</div>
					<div class="card-body">
						<table class="table table-default">
							<thead>
								<tr>
									<th>Name</th>
									<th>Action</th>
								</tr>
							</thead>
							<tbody>
								{% for category in groups %}
									<tr>
										<td><a href="{{ path('group', {'id': category.id }) }}">{{ category.name }}</a></td>
										<td><a class="btn btn-danger" href="{{ path('deletecategory', {'id': category.id }) }}"><i class="fa fa-times"></i></a></td>
									</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="card">
					<div class="card-header">
						<h3>{% if group %} <a class="btn btn-primary br-5" href="{{ path('group')}}">New</a> Edit{% else %}New{% endif %} Category</h3>
					</div>
					<div class="card-body">
						<form action="{{ path('group') }}" method="POST" name="edit">
							{% if group %}<input type="hidden" name="edit" value="{{ group.id }}">{% endif %}
							<div class="form-group">
								<input type="text" name="name" class="form-control" placeholder="Category Name" value="{{ group.name|default('') }}" required>
							</div>
							<input type="submit" name="submit" value="Save" class="btn btn-primary">
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		const category_url = "{{ path('group') }}"
		const itemRow = (category) => `
			<tr>
				<td><a href="${category_url}/${category.id}">${category.name}</a></td>
				<td class="flex-big">											
					<a data-name="${category.name}" class="btn btn-danger action-icon delete-row" href="${category_url}/${category.id}"><i class="fa fa-times"></i></a>
				</td>
			</tr>
		`;
	</script>
	{#<script src="{{ asset('js/addRemove.js') }}"></script>#}
{% endblock %}