<h1>All Stories</h1>

<p><a href="/stories/new" class="btn btn-primary">+ New Story</a></p>

<% if (stories.length === 0) { %>
    <p>No stories yet. <a href="/stories/new">Create one!</a></p>
<% } else { %>
    <table>
        <tr>
            <th>Title</th>
            <th>Priority</th>
            <th>Status</th>
            <th>Created</th>
            <th>Actions</th>
        </tr>
        <% stories.forEach(story => { %>
        <tr>
            <td><a href="/stories/<%= story.id %>"><%= story.title %></a></td>
            <td><span class="badge badge-<%= story.priority %>"><%= story.priority %></span></td>
            <td><span class="badge badge-<%= story.status %>"><%= story.status %></span></td>
            <td><%= new Date(story.created_at).toLocaleDateString() %></td>
            <td>
                <a href="/stories/<%= story.id %>/edit" class="btn btn-edit">Edit</a>
                <form action="/stories/<%= story.id %>/delete" method="POST" style="display:inline;"
                      onsubmit="return confirm('Delete this story?')">
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        <% }); %>
    </table>
<% } %>
