{% set title_status_colors = {'Unknown' : '#595959', 'Broken' : '#D7263D', 'Intro' : '#F86624', 'Starts' : '#FF9800', 'Playable' : '#42e335', 'Perfect' : '#1bdeff'} %}
{% extends "template_base.html" %}
{% block title %}{{ title.title_name }} Compatibility{% endblock %}
{% block append_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

<style type="text/css">
.playability-tag {
  display: inline-block;
  font-weight: 400;
  color: {{ title_status_colors[title.status] }};
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid {{ title_status_colors[title.status] }};
  padding: .375rem .75rem;
  font-size: .9375rem;
  line-height: 1.5;
  border-radius: .25rem;
}
</style>

{% endblock %}

{% block content %}
<div class="body-alt-section">
<div class="container">

<!-- 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">
      <a href="{{ title.cover_url }}" class="enlarge-image"><img src="{{ title.cover_url }}" class="img-thumbnail img-fluid" id="displayed_image" width=350 /></a>
    </figure>
    <div class="d-block pb-3">
    <a href="#" onclick="return show_image('{{ title.cover_url }}')">Front</a>
    {% if title.cover_back_url %}
    | <a href="#" onclick="return show_image('{{ title.cover_back_url }}')">Back</a>
    {% endif %}
    {% if title.disc_url %}
    | <a href="#" onclick="return show_image('{{ title.disc_url }}')">Disc</a>
    {% endif %}
    </div>
  </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>
            <span class="playability-tag">{{ title.status }}</span>
          </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>

</div>
</div>
{% endblock %}

{% block append_footer %}
<p class="text-muted">
  <b>Note:</b> Title compatibility status is provided by volunteer reporters in the community, as the reporter experienced the title in the current version of xemu on their computer at time of reporting. As the project evolves, reports may need to be updated. You are invited to help improve the project by submitting an updated compatibility report. Join the Discord server to learn how to contribute!
</p>
{% endblock %}

{% block append_foot %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('.enlarge-image').magnificPopup({
      type: 'image',
      closeOnContentClick: true,
      mainClass: 'mfp-img-mobile',
      image: {
        verticalFit: true
      }
    });
  });

function show_image(url) {
  $('.enlarge-image').attr('href', url);
  $('#displayed_image').attr('src', url);
  return false;
}
</script>
{% endblock %}