{% load otree %}

{% block styles %}

    {% if not player.info_level %}
        <style>
            .additional-info {
                display: none;
            }
        </style>
    {% endif %}
    <style>
        .own-info {
            color: rgb(156, 29, 176);
        }

        .shared-info {
            color: rgb(57, 73, 171);
        }

        .stranger-info {
            color: rgb(2, 136, 209);
        }

        .stranger-info-light {
            color: rgb(161, 194, 250);
        }
    </style>

{% endblock %}

<div class="container mt-5 mb-5">
    <div class="row my-3 justify-content-md-center">
        <div class="col-9">
            <div class="card">
                <img src="{{ img_path }}" class="img-fluid " alt="Not available."
                     rel="popover"/>
                <div class="card-footer" style="display:none">
                    <div class="row">
                        <div class="col">Eine Karte Ihrer Fahrt.</div>
                        <div class="col text-right">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
                                    id="dropdownMenuButton"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Farblegende
                            </button>
                            <div class="dropdown-menu">
                                <p class="dropdown-item-text own-info mx-2">
                                    <strong>&#8212;</strong> Ihre Fahrt alleine
                                </p>
                                <p class="dropdown-item-text shared-info mx-2">
                                    <strong>&#8212;</strong> Fahrt zu zweit
                                </p>
                                <p class="dropdown-item-text stranger-info-light additional-info mx-2">
                                    <strong>&#8212;</strong> Die Fahrt alleine des Fremden
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row text-center">
        <div class="col">
            <div class="card bg-light">
                <div class="card-header">
                    <h6 class="card-title">
                        Reise alleine
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col additional-info own-info">
                                    <h6>Sie</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col own-info">
                                    {{ you.indiv.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col own-info">
                                    {{ you.indiv.time }} min
                                </div>
                            </div>
                        </div>
                        <div class="col border-left border-dark additional-info stranger-info-light">
                            <div class="row">
                                <div class="col">
                                    <h6>Fremder</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ stranger.indiv.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ stranger.indiv.time }} min
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title">
                        Vergleich
                    </h6>
                </div>
                <div class="card-body collapse" id="collapseCompBody">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col additional-info">
                                    <h6>Sie</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    ± {{ you.diff.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    ± {{ you.diff.time }} min
                                </div>
                            </div>
                        </div>
                        <div class="col additional-info">
                            <div class="row">
                                <div class="col">
                                    <h6>Fremder</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    ± {{ stranger.diff.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    ± {{ stranger.diff.time }} min
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-light">
                <div class="card-header">
                    <h6 class="card-title">Reise zu zweit</h6>
                </div>
                <div class="card-body shared-info">
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col additional-info">
                                    <h6>Sie</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ you.shared.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ you.shared.time }} min
                                </div>
                            </div>
                        </div>
                        <div class="col additional-info">
                            <div class="row">
                                <div class="col">
                                    <h6>Fremder</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ stranger.shared.cost | c }}
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    {{ stranger.shared.time }} min
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>