{% extends 'base.html' %}
{% from 'macros.html' import cover_art with context %}

{% block title %}{{ _('New Spotify mapping confirmation') }} - CritiqueBrainz{% endblock %}

{% block content %}
<h2>{{ _('Spotify album mapping confirmation') }}</h2>
<div class="text-center">
  <strong style="font-size: 16px">{{ _('Are you sure you want to create this mapping?') }}</strong>
  <hr />
  <div class="row">
    <div class="col-md-6">
      <h4>CritiqueBrainz</h4>
      <p>{{ _('%(album)s by %(artist)s', album=release_group.title, artist=release_group['artist-credit-phrase']) }}</p>
      {{ cover_art(release_group.mbid, 'release_group', attributes='class=cover-art') }}
    </div>
    <div class="col-md-6">
      <h4>{{ _('Spotify') }}</h4>
      <p>{{ _('URI:') }} {{ spotify_album.uri }}</p>
      <iframe src="https://embed.spotify.com/?uri={{ spotify_album.uri }}&theme=white"
              width="250" height="330" frameborder="0" allowtransparency="true"></iframe>
    </div>
  </div>
  <hr />
  <form role="form" method="POST" action="{{ url_for('mapping.spotify_confirm', spotify_ref=spotify_album.uri, release_group_id=release_group.mbid) }}">
    <button type="submit" class="btn btn-success">{{ _('Create') }}</button>
    <a href="{{ url_for('release_group.entity', id=release_group.mbid) }}" class="btn btn-danger">{{ _('Cancel') }}</a>
  </form>
</div>
{% endblock %}