{% extends "base.html" %}
{% block main_content %}

<div class="container">
    <div class="row px-3 my-5 offset-lg-3 col-lg-6 col-sm-12" style="border: 3px solid #5bc0de; border-radius: 15px;">
        <h3 class="my-3 text-center" style="color: #5bc0de">
            <img width="64" height="64" src="internal/pa-logo.png"/></img>&nbsp;Photo Assistant - About</h3>
        <div class="alert alert-info">
            <center>{{build_info}}</center>
        </div>
    </div>
    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link active" id="nav-commits-tab" data-bs-toggle="tab" data-bs-target="#nav-commits" type="button" role="tab" aria-controls="nav-commits" aria-selected="true">Commits</button>
        <button class="nav-link" id="nav-bugs-tab" data-bs-toggle="tab" data-bs-target="#nav-bugs" type="button" role="tab" aria-controls="nav-bugs" aria-selected="false">Known Bugs</button>
        <button class="nav-link" id="nav-todo-tab" data-bs-toggle="tab" data-bs-target="#nav-todo" type="button" role="tab" aria-controls="nav-todo" aria-selected="false">TODO</button>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-commits" role="tabpanel" aria-labelledby="nav-commits-tab">
        {% for c in commits %}
            <dl class="row">
                <div class="dt col-3 bg-light">{{c.date}}</div>
                <div class="dd col-9 bg-light">{{c.str}}</div>
            </dl>
        {% endfor %}
      </div>
      <div class="tab-pane fade" id="nav-bugs" role="tabpanel" aria-labelledby="nav-bugs-tab">
        {% for b in bugs %}
            <dl class="row bg-light">
                <div class="dt col-12">{{b.str|safe}}</div>
            </dl>
        {% endfor %}
      </div>
      <div class="tab-pane fade" id="nav-todo" role="tabpanel" aria-labelledby="nav-todo-tab">
        <pre>{{todo}}</pre>
      </div>
    </div>
</div class="container">

{% endblock main_content %}