<!DOCTYPE html>
<html lang="en">
  <%= _head(conn: @conn, title: "New Flag") %>
  <body>
    <nav id="fwf-top-bar" class="navbar navbar-inverse navbar-toggleable-xl">
      <a class="navbar-brand" href="https://github.com/tompave/fun_with_flags">FunWithFlags</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="<%= path(@conn, "/flags") %>">all flags</a>
          </li>

          <span class="navbar-text">
            &gt;
          </span>

          <li class="nav-item active">
            <a class="nav-link" href="<%= path(@conn, "/new") %>">New Flag</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="container mt-3">      
      <div class="row">
        <div class="col">
          <form id="new-flag-form" action="<%= path(@conn, "/flags") %>" method="post">

            <%= if assigns[:error_message] do %>
              <div class="form-group has-danger">
                <label class="form-control-label" for="flag_name">Flag Name</label>
                <input type="text" class="form-control form-control-danger" id="new-flag-name-field" name="flag_name" placeholder="the name for a new flag">
                <div class="form-control-feedback"><%= @error_message %></div>
                <small id="new-flag-name-help" class="form-text text-muted">
                  Letters, numbers and underscores only. Lowercase and snake_case identifers without dashes would be more idiomatic.
                </small>
              </div>
            <% else %>
              <div class="form-group">
                <label for="flag_name">Flag Name</label>
                <input type="text" class="form-control" id="new-flag-name-field" name="flag_name" placeholder="the name for a new flag">
                <small id="new-flag-name-help" class="form-text text-muted">
                  Letters, numbers and underscores only. Lowercase and snake_case identifers without dashes would be more idiomatic.
                </small>
              </div>
            <% end %>


            <button type="submit" class="btn btn-primary">Create</button>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
