{% extends "template_base.html" %}
{% block title %}{{ title.title_name }} Compatibility{% endblock %}
{% block content %}
<!-- Game Identification -->
<div class="py-5 row flex-md-nowrap text-center text-md-left align-items-center justify-content-center justify-content-md-start">
  {% if title.xtimage_url %}
  <div class="col-md-auto">
    <img src="{{ title.xtimage_url }}" class="rounded-circle img-thumbnail" />
  </div>
  {% endif %}
  <div class="col-md-auto align-self-center">
    <h1>{{ title.title_name }}</h1>
    <h6 class="card-subtitle mb-2 text-muted">
      <strong>{{ title.full_title_id_text }}</strong>
      <span class="align-text-top" style="font-family: monospace;">[{{ title.full_title_id_hex }}]</span>
    </h6>
  </div>
</div>

<div class="row">
  <!-- Game Cover -->
  <div class="col-md-4 text-center">
    <figure class="figure">
      <img src="{{ title.cover_url }}" class="img-thumbnail img-fluid" width=350 />
    </figure>
  </div>

  <!-- Compatibility Details -->
  <div class="col-md-8">
    <ul class="list-group mb-3">

      <li class="list-group-item d-flex justify-content-between">
        <div class="list-group w-100">
          <div class="d-flex w-100 justify-content-between">
            <h5>Status</h5>
            <strong>{{ title.status }}</strong>
          </div>
          <p class="text-muted mb-1">{{ title_status_descriptions[title.status] }}</p>
        </div>
      </li>

      {% if title.most_recent_test %}
      <li class="list-group-item d-flex justify-content-between">
        <div class="list-group w-100">
          <div class="d-flex w-100 justify-content-between">
            <h5>Last Tested</h5>
            <strong>{{ title.most_recent_test.created_at.strftime('%b %-d, %Y') }}</strong>
          </div>
          <details>
            <summary>
            {% if title.most_recent_test.info['provided_by_ip_addr'] %}
            <strong>Reported by anonymous user at IP address:</strong> {{ title.most_recent_test.info['provided_by_ip_addr'] }}
            {% endif %}
            {% if title.most_recent_test.info['provided_by_discord_name'] %}
            <strong>Reported by Discord user:</strong> {{ title.most_recent_test.info['provided_by_discord_name'] }}
            {% endif %}
            </summary>
            <pre>
{% for k in title.most_recent_test.info %}{{ k }}: {{ title.most_recent_test.info[k]|e }}
{% endfor %}</pre>
          </details>
        </div>
      </li>
      {% endif %}
      {% if 'external_links' in title.title_report %}
      <li class="list-group-item d-flex justify-content-between">
        <div>
          <span>External Sites</span>
        </div>
        <div class="list-group text-right">
          <div>
          {% for name in title.title_report['external_links'] %}
            <a class="btn btn-outline-secondary btn-sm" href="{{ title.title_report['external_links'][name] }}" role="button">{{ name }}</a>
          {% endfor %}
          </div>
        </div>
      </li>
      {% endif %}
    </ul>

    {% if False %}
    <!-- YouTube Embed -->
    <div class="py-2">
      <h4>Video Playlist</h4>
    </div>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/qlU0dgmj46Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    {% endif %}

    <!-- Known Issues -->
    <div class="py-2">
      <h4>Known Issues</h4>
    </div>
    <div class="list-group">
      {% if title.issues|length > 0 %}
        {% for issue in title.issues %}
      <a href="{{ issue.url }}" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">{{ issue.title|e }}</h5>
          <small>#{{ issue.number }}</small>
        </div>
        <p class="mb-1 text-small text-muted">Issue last updated {{ issue.updated_at.strftime('%b %-d, %Y') }}.</p>
      </a>
        {% endfor %}
      {% else %}
      <div class="list-group-item text-center text-muted text-small">
        No issues have been reported for this title.
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}