<div class="modal-body">
    <h3>Ping #{{ ping.n }}
        {% if ping.exitstatus > 0 %}
        <span class="text-danger">(failure, exit status {{ ping.exitstatus }})</span>
        {% elif ping.exitstatus == 0 %}
        <span class="text-success">(exit status 0)</span>
        {% elif ping.kind == "fail" %}
        <span class="text-danger">(received via the <code>/fail</code> endpoint)</span>
        {% elif ping.kind == "start" %}
        <span class="text-success">(received via the <code>/start</code> endpoint)</span>
        {% elif ping.kind == "ign" %}
        <span class="text-muted">(ignored)</span>
        {% endif %}
    </h3>

    <div class="row">
        <div class="col-sm-6">
            <p>
                <strong>Time Received</strong>
                <code>{{ ping.created.isoformat }}</code>
            </p>
        </div>
        {% if ping.remote_addr %}
        <div class="col-sm-6">
            <p>
                <strong>Client IP</strong>
                {{ ping.remote_addr }}
            </p>
        </div>
        {% endif %}

        {% if ping.scheme %}
        <div class="col-sm-6">
            <p>
                <strong>Protocol</strong>
                {{ ping.scheme }}
            </p>
        </div>
        {% endif %}

        {% if ping.method %}
        <div class="col-sm-6">
            <p>
                <strong>Method</strong>
                {{ ping.method }}
            </p>
        </div>
        {% endif %}

        {% if ping.scheme == "email" %}
        <div class="col-sm-6">
            <p>
                <strong>From</strong>
                {{ ping.ua }}
            </p>
        </div>
        {% else %}
        <div class="col-sm-12">
            <p>
                <strong>User Agent</strong>
                <span class="ua">{{ ping.ua }}</span>
            </p>
        </div>
        {% endif %}

        {% if subject %}
        <div class="col-sm-12">
            <p>
                <strong>Subject</strong>
                <span>{{ subject }}</span>
            </p>
        </div>
        {% endif %}
    </div>

    {% if ping.body %}
        <h4>Request Body</h4>

        {% if plain or html %}
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#email-body-raw" data-toggle="tab">Raw Message</a>
            </li>
            {% if plain %}
            <li>
                <a href="#email-body-plain" data-toggle="tab">Text</a>
            </li>
            {% endif %}
            {% if html %}
            <li>
                <a href="#email-body-html" data-toggle="tab">HTML</a>
            </li>
            {% endif %}
        </ul>
        <div class="tab-content">
            <div id="email-body-raw" class="tab-pane active">
                <pre>{{ ping.body }}</pre>
            </div>

            {% if plain %}
            <div id="email-body-plain" class="tab-pane">
                <pre>{{ plain }}</pre>
            </div>
            {% endif %}

            {% if html %}
            <div id="email-body-html" class="tab-pane">
                <pre>{{ html }}</pre>
                <iframe id="email-body-html-iframe" sandbox></iframe>
            </div>
            {% endif %}
        </div>
        {% else %}
        <pre>{{ ping.body }}</pre>
        {% endif %}
    {% endif %}
</div>
