@import data.Roles
@import data.Recipes
@(roles: Iterable[RoleSummary], recipes: Iterable[Recipe], baseImages: Seq[BaseImage])
@layout("AMIgo"){

  <h1>Roles</h1>

  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
      @for(role <- roles) {
        <a href="#@role.roleId" data-role-id="@role.roleId" class="list-group-item role-id">
        @role.roleId
        </a>
      }
      </div>
    </div>

    <div class="col-md-9">
      <div>
        <div id="explanation">
          Choose a role from the list to see more details.
        </div>

        @for(role <- roles) {
          <div id="detail-@role.roleId" class="hidden">

            <ul class="nav nav-tabs" role="tablist">
              @for(readme <- role.readme) {
                <li role="presentation" class="tab-label active">
                  <a aria-controls="readme" role="tab" data-toggle="tab" data-target="#readme-@role.roleId">README</a>
                </li>
              }
              <li role="presentation" class="tab-label @if(role.readme.isEmpty){active}">
                <a aria-controls="tasks" role="tab" data-toggle="tab" data-target="#tasks-@role.roleId">Tasks</a>
              </li>
              <li role="presentation" class="tab-label">
                <a aria-controls="dependencies" role="tab" data-toggle="tab" data-target="#dependencies-@role.roleId">Dependencies</a>
              </li>
              <li role="presentation" class="tab-label">
                <a aria-controls="usedby" role="tab" data-toggle="tab" data-target="#usedby-@role.roleId">Used by</a>
              </li>
            </ul>

            <div class="tab-content">
              @for(readme <- role.readme) {
                <div role="tabpanel" class="tab-pane markdown active" id="readme-@role.roleId">
                  <pre>@readme.content</pre>
                </div>
              }

              <div role="tabpanel" class="tab-pane @if(role.readme.isEmpty){active}" id="tasks-@role.roleId">
                <h2>Tasks</h2>
                <pre><code>@role.tasksMain.content</code></pre>
              </div>

              <div role="tabpanel" class="tab-pane" id="dependencies-@role.roleId">
                <h2>Dependencies</h2>

                <p>@if(role.dependsOn.isEmpty) {
                  This role does not depend on any other roles.
                } else {
                    This role depends on (including transitive dependencies):

                    @views.html.fragments.dependencyList(Roles.transitiveDependencies(roles.toSeq, role.roleId).dependencies)
                }</p>
              </div>

            <div role="tabpanel" class="tab-pane" id="usedby-@role.roleId">
                <h2>Used by</h2>
                <div class="role-usage">
                    <h4>Roles</h4>

                    @defining(Roles.usedBy(roles.toSeq, role)) { usedBy =>
                        @if(usedBy.isEmpty) {
                            This role is not used by any other role
                        } else {
                            This role is used by the following roles:
                            <ul>
                            @usedBy.map { role =>
                                <li><a href="#@role">@role</a></li>
                            }
                            </ul>
                        }
                      }
                </div>
                <div class="role-usage">
                    <h4>Recipes</h4>
                    @defining(Roles.usedByRecipes(recipes.toSeq, role)) { usedBy =>
                      @if(usedBy.isEmpty) {
                          This role is not used by any recipe
                      } else {
                          This role is used by the following recipes:
                          <ul>
                             @usedBy.map { recipe =>
                            <li><a href="../recipes/@recipe">@recipe</a></li>
                          }
                          </ul>
                      }
                    }
                </div>
                <div class="role-usage">
                    <h4>Base images</h4>
                    @defining(Roles.usedByBaseImages(baseImages, role)) { usedBy =>
                        @if(usedBy.isEmpty) {
                            This role is not used by any base images
                        } else {
                            This role is used by the following base images:
                            <ul>
                            @usedBy.map { baseImage =>
                                <li><a href="@routes.BaseImageController.showBaseImage(baseImage.id)">@baseImage.id</a></li>
                            }
                            </ul>
                        }
                    }
                </div>
              </div>
            </div>

          </div>
        }
      </div>
    </div>
  </div>

} {
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.4.3/showdown.min.js" type="text/javascript"></script>
  <script src="@routes.Assets.versioned("javascripts/roles.js")" type="text/javascript"></script>
}