{% extends "base.html" %}

{% macro write_toc(title, lst) %}
  <li>{{ title }}
    <ul>
      {% for tier, frameworks in lst|groupby('tier') %}
        <li><a href="#fw-tier{{tier}}">Tier {{ tier }}</a></li>
      {% endfor %}
    </ul>
  </li>
{% endmacro %}

{% macro write_framework_list(frameworks) %}
  <table class="doxtable frameworks">
    <tr>
      <th class="framework-main-column">Framework</th>
      <th class="framework-detail-column framework-maintainer-column">Maintainer</th>
      <th class="framework-detail-column framework-type-column">Type</th>
    </tr>
  {% for fw in frameworks %}
    <tr class="framework-row" id="framework-{{ fw.fancyname }}" data-platforms="{{ fw.platform_dict|join(',') }}">
      <td class="framework-main-column">
        <img class="not-available-indicator" src="{{resources}}/icons/bad.png"/>
        <img class="available-indicator" src="{{resources}}/icons/ok.png"/>
        <div>
          <div class="framework-platforms">
          {% for platform in available_platforms %}
            <span class="framework-platform
              framework-platform-{{ platform }}
              {% if platform not in fw.platform_dict %}framework-platform-unsupported{% endif %}"
              >
            {% if fw.platform_dict.get(platform) %}
              <a data-note="{{ fw.platform_dict.get(platform) }}" href="#">
            {% endif %}
                <span class="framework-platform-text">{{ platform }}</span>
            {% if fw.platform_dict.get(platform) %}
                <img src="{{resources}}/icons/warning.png"/></a>
            {% endif %}
            </span>
          {% endfor %}
          </div>
          <a class="framework-fancyname" href="{{fw.href}}">{{fw.fancyname}}</a>
        </div>
        <span class="framework-description">{{fw.description}}</span>
      </td>
      <td class="framework-detail-column framework-maintainer-column">{{ fw.maintainer }}</td>
      <td class="framework-detail-column framework-type-column">{{ fw.type }}</td>
      </td>
    </tr>
  {% endfor %}
  </table>
{% endmacro %}

{% block title %}{{title}} - Frameworks{% endblock %}

{% block head %}
  <script type="text/javascript" src="{{resources}}/notetip.js"></script>
  <script type="text/javascript" src="{{resources}}/frameworks.js"></script>
  <link rel="stylesheet" type="text/css" href="{{resources}}/frameworks.css" />
  <script>
  $(document).ready(main);
  </script>
{% endblock %}

{% block content %}
            <h2><a name="content"></a>{{title}}</h2>

            <div class="header">
              <div class="headertitle">
                <div class="title">
                  KDE Frameworks API Reference
                </div>
              </div>
            </div>
            <div class="contents">
              <div class="textblock">
                {% for para in tierinfo.intro %}
                  <p>{{ para }}</p>
                {% endfor %}
              </div>
              <h2>Frameworks</h2>
              {% for tier, frameworks in framework_lst|groupby('tier') %}
                <h3><a name="fw-tier{{ tier }}"></a>Tier {{tier}}</h3>
                <p>{{ tierinfo.tiers[tier] }}</p>
                {{ write_framework_list(frameworks) }}
              {% endfor %}
              <h2><a name="porting-aids"></a>Porting Aids</h2>
              {{ write_framework_list(porting_aid_lst) }}
            </div>

{% endblock content %}

{% block sidebar %}

        <div class="menu_box">
          <div class="menutitle">
            <div>
              <h2>Table of Content</h2>
            </div>
          </div>
          <div class="nav_list">
            <ul>
              <li>Frameworks
                <ul>
                  {% for tier, _ in framework_lst|groupby('tier') %}
                    <li><a href="#fw-tier{{tier}}">Tier {{ tier }}</a></li>
                  {% endfor %}
                </ul>
              </li>
              <li><a href="#porting-aids">Porting Aids</a></li>
            </ul>
          </div>
        </div>

        <div class="menu_box">
          <div class="menutitle">
            <div>
              <h2>Filters</h2>
            </div>
          </div>
          <div>
            <ul>
              <li>
                <label>
                  <input id="platform-filter" type="checkbox">Filter by platform
                </label>
                <ul id="platform-filter-group" style="display: none">
                  <li>Only show frameworks which supports all of:</li>
                  {% for platform in available_platforms %}
                    <li>
                      <label>
                        <input data-platform="{{ platform }}" class="platform-checkbox" type="checkbox" checked="1">{{ platform }}
                      </label>
                    </li>
                  {% endfor %}
                </ul>
              </li>
              <li>
                <label>
                  <input id="showMaintainers" type="checkbox">Show maintainers
                </label>
              </li>
            </ul>
          </div>
        </div>

{% endblock %} {# sidebar #}
