{% extends "layout.html" %}
{% block body %}
<div class="row">
  <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <br>
    <a href="javascript:history.back()" class="btn btn-default"> Back </a>
    <div class="row">
      <br>
      {% for r in runnable["children"] %}
      <div class="col-sm-6">
        <a href="{{ r["name"] }}">
        <div class="panel panel-default">
          <div class="panel-body">

            <div class="media">
              <div class="media-left">
                  {% if r["img"] %}
		      <img class="media-object" src="{{ r['img'] }}" style="width: 20px;" alt="r['tooltip']">
		    {% else %}
		      <img class="media-object" src="..." alt="...">
		    {% endif %}
              </div>
              <div class="media-body">
                <h4 class="media-heading">{{ r["fullname"] }}</h4>
              </div>
            </div>

          </div>
        </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
  <div class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10 sidebar-pf sidebar-pf-left">
    <h3>{% if runnable["img"] %}
		<img class="media-object" src="{{ runnable['img'] }}" style="width: 20px;float: left;" alt="runnable['tooltip']">
	{% endif %}
	{{ runnable.fullname }} </h3>
    <p> {{ runnable["description"] }} </p>
  </div>
</div>


{% endblock %}