{% extends "stories.base.html" %}
{% load markup %}
{% block extranav %}
<div class="well sidebar-nav">
  <ul class="nav nav-list">
    <li class="nav-header">This story</li>
    <li><a href="#editstory" data-toggle="modal">Modify story</a></li>
    <li><a href="#">Add task</a></li>
    <li><a href="#">Order tasks</a></li>
  </ul>
</div><!--/.well -->
{% endblock %}
{% block content %}
<div class="row-fluid">
  <div class="span2">
    <h3>Bug {{ story.id }}</h3>
  </div>
  <div class="span10">
    <span class="badge badge-important">Critical</span><br>
    <h4>{{ story.title }}</h4>
  </div>
</div>
<hr>
<div class="row-fluid">
  <div class="span12">
    <table class="table table-condensed">
      <thead>
        <tr>
          <th>Task</th>
          <th>Project</th>
          <th>Series</th>
          <th>Assignee</th>
          <th>Status</th>
          <th>Milestone</th>
        </tr>
      </thead>
      <tbody>
{% for task in story.task_set.all %}
        <tr class="success">
          <td>{{ task.title }}</td>
          <td>{{ task.project.title }}</td>
          <td>{{ task.series.name }}</td>
          <td>{{ task.assignee.username }}</td>
          <td>{{ task.status }}</td>
          <td>{{ task.milestone.name }}</td>
          <td>
              <button class="btn btn-micro" type="button"><i class="icon-edit"></i></button>
              <button class="btn btn-micro" type="button"><i class="icon-remove"></i></button>
          </td>
        </tr>
{% endfor %}
      </tbody>
    </table>
  </div>
</div>
<div class="row-fluid">
  <div class="span12">
    <div class="well well-small">
      {{ story.description|markdown:"safe" }}
    </div>
    <p><i class="icon-tags"></i>
{% for tag in story.storytag_set.all %}
    <span class="label">{{ tag.name }}</span>
{% endfor %}</p>
  </div>
</div>
<div class="row-fluid">
  <table class="table table-striped">
    <tbody>
{% for comment in story.comment_set.all %}
     <tr><td colspan=2>
       <i class="icon-comment"></i>
       by {{ comment.author.username }} on {{ comment.posted_date }}:
     </td></tr>
     <tr><td>{{ comment.content|markdown:"safe" }}</td></tr>
{% endfor %}
    </tbody>
  </table>
  <form>
    <textarea class="input-block-level" rows="3" placeholder="Add a comment"></textarea>
    <button class="btn btn-mini btn-primary" type="button">Add comment</button>
  </form>
</div>
<!-- Modal -->
<div id="editstory" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modify story</h3>
  </div>
  <div class="modal-body">
    <label>Title</label>
    <input class="input-block-level" type="text" value="{{ story.title }}">
    <label>Importance</label>
    <div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-small btn-danger active">Critical</button>
    <button type="button" class="btn btn-small btn-warning">High</button>
    <button type="button" class="btn btn-small btn-info">Medium</button>
    <button type="button" class="btn btn-small">Low</button>
    </div>
    <label></label>
    <label>Description <small>(can use Markdown)</small></label>
    <textarea class="input-block-level" rows="8">{{ story.description }}
    </textarea>
    <label>Tags</label>
    <div class="input-prepend">
    <span class="add-on"><i class="icon-tags"></i></span>
    <input class="input-block-level" id="prependedInput" type="text"
     value="{% for tag in story.storytag_set.all %}{{ tag.name }} {% endfor %}">
    </span>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
{% endblock %}