{% extends "base.html" %}

{% block title %}Comparing {{ SITE_OPTIONS.xml_format_name }} and {{ other_format.name }}{% endblock %}

{% block extrahead %}
<style>
.examplenotes {
    max-width: 34rem;
}
.intro,
.toc,
.center {
    max-width: 34rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}
.example {
    margin-top: 60px;
}
.markupexamples {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 40px 1rem;
    background: #F8F5F1;
}
.markupexample {
    flex: calc(50% - (15px + 15px));
    margin-top: 20px;
    max-width: 680px;
    margin-right: 15px;
    margin-left: 15px;
}
@media (max-width: 680px) {
   .markupexample {
        max-width: 100%;
   }
}

.markupcode {
    border: 1px solid hsla(0, 0%, 0%, 0.15);
    border-radius: 6px;
    padding: 15px;
    background: white;
    overflow: auto;
}

.exampleimg {
    margin: 0 0 15px;
    max-height: 200px;
    max-width: 500px;
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid hsla(0, 0%, 0%, 0.1);
    box-sizing: border-box;
    max-width: 100%;
}
.examplenotes {
    margin: 0 0 15px;
}
.showui { margin: 0 0 15px; }
.onlydiff .nodiff { font-size: 0; }
.onlydiff .nodiff:after { content: "..."; font-size: 18px; }
.markupexamples:not(.onlydiff) .diff, .markupexamples:not(.onlydiff) .diff * { font-weight: bold; color: blue !important; }
</style>
{% endblock %}

{% block content_full %}
<section class="intro">
    <h1>Comparing {{ SITE_OPTIONS.xml_format_name }} and {{ other_format.name }}</h1>

    <p>On this page, you’ll find several examples of documents encoded both in {{ SITE_OPTIONS.xml_format_name }} and {{ other_format.name }}. The goal is to give you a sense of the differences, especially if you’re already familiar with {{ other_format.name }}.</p>
</section>

<form id="comparisonform">
{% for comparison in comparisons %}
<section class="example" id="{{ comparison.example.slug }}">
    <div class="center">
        <h2>{{ comparison.example.name }}</h2>
        <img class="exampleimg" src="{% relative_url_string comparison.example.image_url %}">
        {% if comparison.preamble_html %}
        {{ comparison.preamble_html|safe }}
        {% endif %}
        {% if comparison.highlight_diffs %}
        <p class="showui">Show:
            <label><input type="radio" name="toggle{{ forloop.counter }}" class="switchdiff" data-example="{{ forloop.counter }}" value="1" checked> Relevant section</label>
            <label><input type="radio" name="toggle{{ forloop.counter }}" class="switchdiff" data-example="{{ forloop.counter }}" value="2"> Full document</label>
        </p>
        {% endif %}
    </div>
    <div class="markupexamples{% if comparison.highlight_diffs %} onlydiff{% endif %}" id="markupexamples{{ forloop.counter }}">
        <div class="markupexample">
            <h3>{{ other_format.name }}</h3>
            <div class="markupcode">
                {{ comparison.other_document_html|safe }}
            </div>
        </div>
        <div class="markupexample">
            <h3>{{ SITE_OPTIONS.xml_format_name }}</h3>
            <div class="markupcode">
                {{ comparison.document_html|safe }}
            </div>
        </div>
    </div>
</section>
{% endfor %}
</form>
{% endblock %}

{% block finalscript %}
<script>
function toggleDiff(e) {
    var onlyDiff = e.target.value === '1',
        exampleNumber = e.target.dataset.example,
        exampleEl = document.getElementById('markupexamples' + exampleNumber);
    if (onlyDiff) {
        exampleEl.classList.add('onlydiff');
    }
    else {
        exampleEl.classList.remove('onlydiff');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    var els = document.querySelectorAll('.switchdiff'),
        i = els.length;
    while (i--) {
        els[i].addEventListener('change', toggleDiff);
    }
    document.getElementById('comparisonform').reset();
});
</script>
{% endblock %}