<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ device.name }} Peripheral Coverage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.peripheral, .register {
  border-radius: 3px;
  border: solid 1px #eee;
  margin: 1rem 0;
  padding: 1rem;
}
.peripheral h3, .register h4 {
  margin-top: 0;
}
.bitfield td, .bitfield th {
  text-align: center;
}
.vertical {
  padding: 5px 0 !important;
  vertical-align: middle !important;
  text-align: center;
  text-align: -webkit-center;
}
.vertical div {
  writing-mode: vertical-lr;
}
.headerlink {
  font-size: 50%;
}
nav.menu {
  margin: 1rem 0;
}
nav.menu a {
  display: inline-block;
  border-radius: 3px;
  border: solid 1px #ccc;
  padding: 0.3rem;
  margin: 0.1rem;
  text-decoration: none;
}
.bitfield td.separated {
  background-color:#eee;
}
summary {
  /* fix bootstrap 2 bug, https://github.com/twbs/bootstrap/issues/21060 */
  display: list-item;
}
details[open] > summary {
  font-weight: 600;
}
</style>
</head>

<body>

<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">{{ device.name }} Device Coverage</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">{{ device.name }} Peripheral Coverage</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#" id="show-all-registers">Show All Registers</a></li>
        <li><a href="#" id="hide-all-registers">Hide All Registers</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div>
        Overall: {{ device.fields_documented }}/{{ device.fields_total }}
        fields covered
      </div>
      <div class="progress">
        
        <div class="progress-bar progress-bar-success" style="width: {{ device.progress }}%">
        </div>
      </div>
    </div>
  </div>
  <nav class="menu">
    {%- for peripheral in device.peripherals %}
    <a href="#{{ peripheral.name }}">{{ peripheral.name }}</a>
    {%- endfor %}
  </nav>
  {% for peripheral in device.peripherals %}{% assign pname = peripheral.name %}
  <div class="peripheral">
    <h3 id="{{ pname }}">
      {{ pname }}
      <a class="headerlink" href="#{{ pname }}">
        <span class="glyphicon glyphicon-link"></span>
      </a>
    </h3>
    <p>{{ peripheral.base }}: {{ peripheral.description }}</p>
    <div class="progress">

      <div class="progress-bar progress-bar-success" style="width: {{ peripheral.progress }}%"></div>
    </div>
    <p>
      <em>
        {{ peripheral.fields_documented }}/{{peripheral.fields_total }}
        fields covered.
      </em>
    </p>
    <details class="register-map" id="{{ pname }}-register-map">
      <summary>Toggle register map</summary>
      <table class="table table-bordered register-map-table">
        <tr>
          <th>Offset</th>
          <th>Name</th>
          {%- for i in (0..31) reversed %}
          <th class="vertical"><div>{{ i }}</div></th>
          {%- endfor %}
        </tr>
        {%- for register in peripheral.registers %}
        <tr>
          <td>{{ register.offset }}{% if register.size != 32 %} ({{ register.size }}-bit){% endif %}</td>
          <td>{{ register.name }}</td>
          {%- for row in register.table %}
          {%-   if row %}
          {%-     for field in row.fields %}
          {%-       unless field.name %}
          {%-         for _ in (1..field.width) %}
          <td{% if field.separated %} class="separated"{% endif %}></td>
          {%-         endfor %}
          {%-       endunless %}
          {%-       if field.name %}
          <td colspan="{{ field.width }}" class="vertical{% if field.separated %} separated{% endif %}">
            <div><a class="fieldlink" href="#{{ pname }}:{{ register.name }}:{{ field.name }}">{{ field.name }}</a></div>
          </td>
          {%-       endif %}
          {%-     endfor %}
          {%-   else %}
          {%-     for _ in (1..16) %}
          <td></td>
          {%- endfor %}
          {%-   endif %}
          {%- endfor %}
        </tr>
        {%- endfor %}
      </table>
    </details>
    <details class="registers" id="{{ pname }}-registers">
      <summary>Toggle registers</summary>
      {% for register in peripheral.registers %}
      <div class="register">
        <h4 id="{{ pname }}:{{ register.name }}">
          {{ register.name }}
          <a class="headerlink" href="#{{ pname }}:{{ register.name }}">
            <span class="glyphicon glyphicon-link"></span>
          </a>
        </h4>
        <p>{{ register.description }}</p>
        <p>
          Offset: {{ register.offset }}, size: {{ register.size }}, reset: {{ register.resetValue }}, access: {{ register.access
          }}{% if register.writeConstraint.range %}, allowed values: {{ register.writeConstraint.range.minimum }}-{{ register.writeConstraint.range.maximum }}{% endif %}
        </p>
        <div class="progress">

          <div class="progress-bar progress-bar-success" style="width: {{ register.progress }}%"></div>
        </div>
        {% if register.fields_total > 0 %}
        <p>
          <em>
            {{ register.fields_documented}}/{{ register.fields_total }}
            fields covered.
          </em>
        </p>
        <div class="bitfield">
          <table class="table table-striped table-bordered bitfield">
            {%- for row in register.table %}
            {%- if row %}
            <tr>
              {%- for header in row.headers %}
              <th>{{ header }}</th>
              {%- endfor %}
            </tr>
            <tr>
              {%- for field in row.fields %}
              <td colspan="{{ field.width }}"{% if field.separated %} class="separated"{% endif %}>
                {%- if field.name %}
                <a class="fieldlink{% if field.doc %} text-success{% endif %}" href="#{{ pname }}:{{ register.name }}:{{ field.name }}">
                  {{ field.name }}
                </a>
                <br>
                {{ field.access }}
                {%- endif %}
              </td>
              {%- endfor %}
            </tr>
            {%- endif %}
            {%- endfor %}
          </table>
        </div>
        {% endif %}
        <details class="fields" id="{{ pname }}-{{ register.name }}-fields">
          <summary>Toggle fields</summary>
          {%- for field in register.fields %}
          <h4 id="{{ pname }}:{{ register.name }}:{{ field.name }}">
            {{ field.name }}
            <a class="headerlink" href="#{{ pname }}:{{ register.name }}:{{ field.name }}">
              <span class="glyphicon glyphicon-link"></span>
            </a>
          </h4>
          <p>
            {%- if field.width > 1 %}
              Bits {{ field.offset }}-{{ field.msb }}:
            {%- else %}
              Bit {{ field.offset }}:
            {%- endif %}
            {{ field.description }}.
          </p>
          {%- if field.doc %}
          <p>{{ field.doc }}</p>
          {%- endif %}
          {%- endfor %}
        </details>
      </div>
      {%- endfor %}
    </details>
  </div>
  {%- endfor %}
</div>

<script>
  document.getElementById('show-all-registers').addEventListener('click', e => {
    document.querySelectorAll('.registers').forEach(el => el.open = true)
    e.preventDefault()
  })
  document.getElementById('hide-all-registers').addEventListener('click', e => {
    document.querySelectorAll('.registers').forEach(el => el.open = false)
    e.preventDefault()
  })
  function locationHashChanged() {
    const [peripheral, register, field] = window.location.hash.substr(1).split(":", 3)
    if (register && document.getElementById(`${peripheral}-registers`)) {
      document.getElementById(`${peripheral}-registers`).open = true
    }
    if(field && document.getElementById(`${peripheral}-${register}-fields`)) {
      document.getElementById(`${peripheral}-${register}-fields`).open = true
    }
    if (window.location.hash) {
      window.location.hash = window.location.hash
    }
  }
  window.addEventListener("hashchange", locationHashChanged)
  locationHashChanged()
</script>

</body>
