{% extends '__layout__.html' %}
{% block title %}View Trade{% endblock %}
{% block head %}
<style>
    .text-secondary {
        color: rgb(199, 199, 199) !important;
    }
    .text-robux {
        color: rgb(26, 212, 103) !important;
        font-weight: 600;
    }
    .bg-dark {
        background-color: rgb(30,30,30) !important;
    }
    .messagealerts {
        background: rgba(255, 0, 0, 0.2);
        color: rgb(226, 226, 226);
        word-wrap: break-word;
    }
</style>
{% endblock %}
{% block content %}
<div class="ms-auto me-auto" style="width: 800px;min-height: 100vh;margin-top: 100px;">
    <a class="m-0 mb-2 text-white text-decoration-none" href="/trade"> < Return to trades </a>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div>
        {% for message in messages %}
            <div class="alert border border-danger p-2 text-center messagealerts">
                {{ message }}
            </div>
        {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
    <div class="row">
        <div class="col-3 border-end ps-4 pe-4 position-relative" style="min-height: 350px;">
            <img class="rounded-2 mt-3" width="100%" style="aspect-ratio: 1/1;" src="/Thumbs/Head.ashx?x=180&y=180&userId={{OppositeUser.id}}" alt="{{OppositeUser.username}}">
            <p class="m-0 text-center text-white" style="font-size: 13px;">Your trade with <a class="text-decoration-none" href="/users/{{OppositeUser.id}}/profile">{{OppositeUser.username}}</a> is {{TradeObj.status.name}}</p>
            <div class="mt-auto position-absolute" style="bottom: 0;width: calc(100% - 3rem);">
                {% if TradeObj.status.value == 0: %}
                    {% if SenderUser.id == currentuser.id: %}
                        <form action="/trade/{{TradeObj.id}}/cancel" method="post">
                            <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                            <button class="btn btn-secondary w-100 btn-sm">Cancel Trade</button>
                        </form>
                    {%endif%}
                    {% if RecipientUser.id == currentuser.id: %}
                        <form action="/trade/{{TradeObj.id}}/accept" method="post">
                            {% if AuthenticatedUser.TOTPEnabled: %}
                            <input type="text" placeholder="2FA Code" name="totpcode" class="form-control w-100 mt-1">
                            {%endif%}
                            <input type="hidden" name="csrf_token" value="{{csrf_token()}}">
                            <button class="btn btn-success w-100 btn-sm mt-1" onclick="return confirm('Are you sure you want to accept this trade?')">Accept Trade</button>
                        </form>
                        <form action="/trade/{{TradeObj.id}}/decline" method="post">
                            <button class="btn btn-danger w-100 btn-sm mt-2">Decline Trade</button>
                        </form>
                    {%endif%}
                {%endif%}
            </div>
        </div>
        <div class=col-9>
            <div class="d-flex">
                {% if SenderUser.id != currentuser.id: %}
                    <h5>Items you will receive</h5>
                {%else%}
                    <h5>Items you will send</h5>
                {% endif %}
                <p class="text-secondary m-0 ms-auto">Value: <span class="text-robux">R$ {{SenderOfferValue}}</span></p>
            </div>
            <div class="row">
                {% for i in range(4): %}
                    {% if (len(SenderItems) - 1 - i) >= 0: %}
                    <div class="col">
                        <div class="border position-relative">
                            <img src="/Thumbs/Asset.ashx?x=100&y=100&assetId={{SenderItems[i].AssetId}}" width="100%" style="aspect-ratio: 1/1;" alt="{{SenderItems[i].Name}}">
                            {% if SenderItems[i].serial != None: %}
                                <p class="position-absolute bg-dark p-1 item-card-serial text-white" style="bottom: -16px;left: 0px;font-size: 12px;">#{{SenderItems[i].serial}}</p>
                            {%endif%}
                        </div>
                        <a class="m-0 text-decoration-none text-center w-100 d-block" style="font-size: 12px;" target="_blank" href="/catalog/{{SenderItems[i].AssetId}}/">{{SenderItems[i].Name}}</a>
                    </div>
                    {%else%}
                    <div class="col">
                        <div class="border w-100" style="aspect-ratio: 1/1;">
                        </div>
                    </div>
                    {%endif%}
                {%endfor%}
                <div class="col">
                    <div width="100%" class="border text-robux p-2 text-center d-flex align-items-center justify-content-center" style="aspect-ratio: 1/1;">
                        {%if TradeObj.sender_userid_robux > 0 %}<h5 class="text-robux m-0">{{TradeObj.sender_userid_robux}} ROBUX</h5>{%endif%}
                    </div>
                </div>
            </div>
            <div class="linebreak"></div>
            <div class="d-flex">
                {% if SenderUser.id == currentuser.id: %}
                    <h5>Items you will receive</h5>
                {%else%}
                    <h5>Items you will send</h5>
                {% endif %}
                <p class="text-secondary m-0 ms-auto">Value: <span class="text-robux">R$ {{RecipientOfferValue}}</span></p>
            </div>
            <div class="row">
                {% for i in range(4): %}
                    {% if (len(RecipientItems) - 1 - i) >= 0: %}
                    <div class="col">
                        <div class="border position-relative">
                            <img src="/Thumbs/Asset.ashx?x=100&y=100&assetId={{RecipientItems[i].AssetId}}" width="100%" style="aspect-ratio: 1/1;" alt="{{RecipientItems[i].Name}}">
                            {% if RecipientItems[i].serial != None: %}
                                <p class="position-absolute bg-dark p-1 item-card-serial text-white" style="bottom: -16px;left: 0px;font-size: 12px;">#{{RecipientItems[i].serial}}</p>
                            {%endif%}
                        </div>
                        <a class="m-0 text-decoration-none text-center w-100 d-block" style="font-size: 12px;" target="_blank" href="/catalog/{{RecipientItems[i].AssetId}}/">{{RecipientItems[i].Name}}</a>
                    </div>
                    {%else%}
                    <div class="col">
                        <div class="border w-100" style="aspect-ratio: 1/1;">
                        </div>
                    </div>
                    {%endif%}
                {%endfor%}
                <div class="col">
                    <div width="100%" class="border text-robux p-2 text-center d-flex align-items-center justify-content-center" style="aspect-ratio: 1/1;">
                        {%if TradeObj.recipient_userid_robux > 0 %}<h5 class="text-robux m-0">{{TradeObj.recipient_userid_robux}} ROBUX</h5>{%endif%}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}