3 files changed, 174 insertions, 0 deletions
diff --git a/templates/category/create.html b/templates/category/create.html
new file mode 100644
index 0000000..e206898
--- /dev/null
+++ b/templates/category/create.html
@@ -0,0 +1,51 @@
+{% extends "base.html" %}
+
+{% block title %}
+  Nouvelle catégorie
+{% endblock title %}
+
+{% block main %}
+
+  <div>
+    <p class="g-Paragraph">
+      <a class="g-Link g-Media__Large" href="/categories">
+        Retour aux categories
+      </a>
+    </p>
+
+    <form class="g-Form" action="/category/create" method="POST">
+      <h1 class="g-H1">
+        Nouvelle catégorie
+      </h1>
+
+      {% if error %}
+        <div class="g-Form__Error">{{ error }}</div>
+      {% endif %}
+
+      <label class="g-Form__Label" for="name">Nom</label>
+      <input
+        name="name"
+        class="g-Form__Input"
+        id="name"
+        value="{{ form.name | default(value="") }}"
+        required
+        {% if not form %} autofocus {% endif %}
+      />
+
+      <label class="g-Form__Label" for="color">Couleur</label>
+      <input
+        name="color"
+        type="color"
+        class="g-Form__Input g-Form__InputColor"
+        id="color"
+        value="{{ form.color | default(value="") }}"
+        required
+      />
+
+      <div>
+        <input class="g-Button__Validate" type="submit" value="Créer" />
+      </div>
+    </form>
+  </div>
+
+{% endblock main %}
diff --git a/templates/category/table.html b/templates/category/table.html
new file mode 100644
index 0000000..896304a
--- /dev/null
+++ b/templates/category/table.html
@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+
+{% block title %}
+  Catégories
+{% endblock title %}
+
+{% block main %}
+
+  <div class="g-Paragraph g-Payments__Header">
+    <a class="g-Button__Validate" href="/category">Nouveau</a>
+  </div>
+
+  {% if not categories %}
+
+    <div class="g-Payments__NoResults">
+      Il n’y a aucune catégorie.
+    </div>
+
+  {% else %}
+
+    <div class="g-Table">
+      {% for category in categories %}
+        <a
+          class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
+          href="/category/{{ category.id }}"
+        >
+          <span
+            class="g-Table__Cell"
+            style="color: {{ category.color }}"
+          >
+            {{ category.name }}
+          </span>
+        </a>
+      {% endfor %}
+    </div>
+
+  {% endif %}
+{% endblock main %}
diff --git a/templates/category/update.html b/templates/category/update.html
new file mode 100644
index 0000000..a4c1481
--- /dev/null
+++ b/templates/category/update.html
@@ -0,0 +1,85 @@
+{% extends "base.html" %}
+
+{% block title %}
+  Catégorie {{ id }}
+{% endblock title %}
+
+{% block main %}
+
+  <div>
+    <p class="g-Paragraph">
+      <a class="g-Link g-Media__Large" href="/categories">
+        Retour aux catégories
+      </a>
+    </p>
+
+    {% if error %}
+      <div class="g-Form__Error">{{ error }}</div>
+    {% endif %}
+
+    {% if not category %}
+
+      La catégorie n’a pas été trouvée.
+
+    {% else %}
+
+      <form
+        class="g-Form"
+        action="/category/{{ category.id }}/update"
+        method="POST"
+      >
+        <h1 class="g-H1">Modification</h1>
+
+        <label class="g-Form__Label" for="name">Nom</label>
+        <input
+          name="name"
+          class="g-Form__Input"
+          id="name"
+          value="{{ form.name | default(value=category.name) }}"
+          required
+        />
+
+        <label class="g-Form__Label" for="color">Couleur</label>
+        <input
+          name="color"
+          type="color"
+          class="g-Form__Input g-Form__InputColor"
+          id="color"
+          value="{{ form.color | default(value=category.color) }}"
+          required
+        />
+
+        <div>
+          <input class="g-Button__Validate" type="submit" value="Modifier" />
+        </div>
+      </form>
+
+      <form
+        class="g-Form"
+        action="/category/{{ category.id }}/delete"
+        method="POST"
+      >
+        <h1 class="g-H1">Suppression</h1>
+
+        {% if is_category_used %}
+          <p>
+            La catégorie ne peut pas être supprimée car elle est actuellement
+            utilisée.
+          </p>
+        {% else %}
+          <label class="g-Form__Label" for="remove-input">
+            Veuillez recopier le nom de la catégorie : « {{ category.name }} ».
+          </label>
+
+          <input name="remove-input" class="g-Form__Input" id="remove-input" data-name="{{ category.name }}" />
+
+          <div>
+            <input class="g-Button__Danger" type="submit" value="Supprimer" id="remove-button" disabled />
+          </div>
+        {% endif %}
+      </form>
+
+    {% endif %}
+  </div>
+
+{% endblock main %}