<div class="card">
        <div class="card-header">
          <strong>Roadmap</strong>
        </div>
        <div class="card-block">
          <p>
            Each issue can be assigned to a <em>milestone</em>. This way it is
            possible to create a roadmap for your project. Below you can create
            the milestones and optionally set dates for them.
          </p>
        </div>
        <form action="{{ url_for(
              '.update_milestones',
              repo=repo.name,
              username=username,
              namespace=repo.namespace, from=from or None) }}"
            method="post" class="icon">
          {{ tag_form.csrf_token }}
          <div class="card-block">
            <div class="row">
              <div class="col-sm-6">
                <strong>Milestone</strong>
              </div>
              <div class="col-sm-6">
                <strong>Date (optional)</strong>
              </div>
            </div>
            <div id="milestones">
          {% for milestone in (repo.milestones_keys or repo.milestones or [""]) %}
              <div class="row p-t-1 milestone" id="milestone_{{ loop.index }}">
                <div class="col-sm-5 p-r-0">
                  <input type="text" name="milestones"
                    value="{{ milestone }}" size="3" class="form-control"/>
                </div>
                <div class="col-sm-5 p-r-0">
                  <input type="text" name="milestone_dates"
                    value="{{ repo.milestones[milestone]
                        if repo.milestones[milestone] is not none
                    }}" class="form-control"/>
                </div>
                <div class="col-sm-2 p-r-0" >
                    <span class="oi milestone_order_up"
                        data-stone="{{ loop.index }}"
                        data-glyph="arrow-thick-top"></span>
                    <span class="oi milestone_order_bottom"
                        data-stone="{{ loop.index }}"
                        data-glyph="arrow-thick-bottom"></span>
                </div>
              </div>
          {% endfor %}
          </div>
          <div class="row p-t-1">
            <div class="col-sm-6">
              <a class="btn btn-secondary btn-sm btn-block extend-form" data-target="#milestones">
                  Add new milestone
              </a>
            </div>
          </div>
          <div class="row p-t-1">
            <div class="col-sm-12">
              <button class="btn btn-primary" type="submit"
                  title="Update the milestones">
                Update
              </button>
            </div>
          </div>
        </div>
        </form>
      </div>