Added Eloquent and Phinx for handling database connections and migrations; added a Ticket model and a simple ticket/create form to create new tickets

views/index.twig

@@ -3,5 +3,30 @@
 {% block title %}Home{% endblock %}
 
 {% block content %}
-  <p>This is a test.</p>
+  <div class="row">
+    <div class="columns twelve">
+      <h1>Welcome to Goliath!</h1>
+    </div>
+  </div>
+
+  <div class="row">
+    {% if tickets|length > 0 %}
+      <table class="columns twelve">
+        <thead>
+          <th>Title</th>
+          <th>Severity</th>
+          <th>Due date</th>
+        </thead>
+        <tbody>
+          {% for ticket in tickets %}
+            <td>{{ ticket.title }}</td>
+            <td>{{ ticket.severity }}</td>
+            <td>{{ ticket.due_at }}</td>
+          {% endfor %}
+        </tbody>
+      </table>
+    {% else %}
+      <p>There a no tickets in the database at this time.</p>
+    {% endif %}
+  </div>
 {% endblock %}

views/layout.twig

@@ -15,13 +15,15 @@
     <div class="nav-left">
       <ul class="nav-menu">
         <li>Goliath</li>
-        <li class="nav-link"><a href="/">Home</a></li>
-        <li class="nav-link"><a href="/tickets">Tickets</a></li>
+        <li class="nav-link"><a href="{{ url_for('index') }}">Home</a></li>
+        <li class="nav-link"><a href="{{ url_for('ticket.create') }}">Create</a></li>
         <li class="nav-link"><a href="/search">Search</a></li>
       </ul>
     </div>
   </nav>
 
-  {% block content %}{% endblock %}
+  <div id="main-wrapper" class="container">
+    {% block content %}{% endblock %}
+  </div>
 </body>
 </html>

views/ticket/create.twig

@@ -0,0 +1,41 @@
+{% extends 'layout.twig' %}
+
+{% block title %}Create new ticket{% endblock %}
+
+{% block content %}
+  <div class="row">
+    <div class="columns twelve">
+      <h1>Create new ticket</h1>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="columns twelve">
+      <form action="/ticket/create" method="POST" class="u-full-width">
+        <div class="row">
+          <div class="six columns">
+            <label for="ticket_title">Title</label>
+            <input id="ticket_title" class="u-full-width" type="text" placeholder="My new ticket" name="ticket_title">
+          </div>
+          <div class="columns three">
+            <label for="ticket_due">Due at</label>
+            <input id="ticket_due" class="u-full-width" type="datetime-local" name="ticket_due">
+          </div>
+          <div class="three columns">
+            <label for="ticket_severity">Severity level</label>
+            <select id="ticket_severity" class="u-full-width" name="ticket_severity">
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+            </select>
+          </div>
+        </div>
+
+        <label for="ticket_body">Ticket body</label>
+        <textarea id="ticket_body" class="u-full-width" placeholder="Explain what this ticket is about..." name="ticket_body"></textarea>
+
+        <input class="button-primary" type="submit" value="Submit">
+      </form>
+    </div>
+  </div>
+{% endblock %}