{% extends '__layout__.html' %}
{% block title %}{{asset.name}}{% endblock %}
{% block head %}
<link href="/static/css/catalog.css" rel="stylesheet"/>
<script src="/static/js/catalog.js?version=5"></script>
<style>
    .text-secondary {
        color: rgb(199, 199, 199) !important;
    }
    .text-limited {
        color: rgb(255,255,255) !important;
        background-color: rgb(9, 136, 62);
        width: fit-content;
        padding-left: 10px;
        font-size: 20px;
        border-top-right-radius: 5px;
        margin: 0;
    }
    .text-limitedu {
        color: rgb(0,0,0) !important;
        background-color: rgb(245, 245, 52);
        padding-right: 3px;
        font-weight: 800;
        border-top-right-radius: 5px;
        padding-left: 3px;
    }
    .text-robux {
        color: rgb(26, 212, 103) !important;
        font-size: small;
        font-weight: 600;
    }
</style>
<div id="csrf_token" data-csrf-token="{{ csrf_token() }}"></div>
<meta id="asset-info" data-asset-name="{{asset.name}}" data-asset-id="{{asset.id}}" data-asset-onsale="{% if asset.is_for_sale: %}true{%else%}false{%endif%}" {% if doesUserOwnAsset: %}data-user-ownasset="true"{% endif %} {% if asset.is_limited: %}data-islimited="true"{%endif%} {%if OffsaleAt: %}data-offsale="{{OffsaleAt}}"{%endif%}>
{% endblock %}
{% block content %}
<div id="main">
    <div class="container ps-5 pe-5 ps-md-0 pe-md-0" style="max-width: 800px;">
        <a href="/catalog/" class="text-decoration-none text-white">< Return to Catalog</a>
        <h1>{{asset.name}}</h1>
        <div class="row">
            <div class="col-md-5 col-12">
                <div class="p-2 rounded overflow-hidden position-relative" style="background-color: rgb(36, 36, 36);">
                    <img width="100%" src="/Thumbs/Asset.ashx?assetId={{asset.id}}&x=420&y=420" style="aspect-ratio: 1/1;" alt="{{asset.name}}">
                    {% if asset.is_limited: %}<p class="position-absolute m-0 fw-bold text-limited" style="bottom:-2px;left:0px;">LIMITED {%if asset.is_limited_unique: %}<span class="text-limitedu" style="padding-top:1.5px">U</span>{%else%}<span class="me-2"></span>{%endif%}</p>{% endif %}
                </div>    
            </div>
            <div class="col-md-4 p-1">
                <div class="d-flex mt-3 mt-md-0">
                    {% if asset.creator_type == 0 :%}
                    <img width="80" height="80" src="/Thumbs/Avatar.ashx?userId={{creator.id}}&x=100&y=100" alt="{{creator.username}}">
                    <div style="font-size:13px;">
                        <p class="m-0 text-secondary">Creator: <a href="/users/{{creator.id}}/profile" class="text-decoration-none">{{creator.username}}</a></p>
                        <p class="m-0 text-secondary">Created: <span class="text-white">{{createddate}}</span></p>
                        <p class="m-0 text-secondary">Updated: <span class="text-white">{{updateddate}}</span></p>
                    </div>
                    {% else %}
                    <img width="80" height="80" src="/Thumbs/GroupIcon.ashx?groupid={{creator.id}}&x=100&y=100" alt="{{creator.name}}">
                    <div style="font-size:13px;">
                        <p class="m-0 text-secondary">Creator: <a href="/groups/{{creator.id}}/--" class="text-decoration-none">{{creator.name}}</a></p>
                        <p class="m-0 text-secondary">Created: <span class="text-white">{{createddate}}</span></p>
                        <p class="m-0 text-secondary">Updated: <span class="text-white">{{updateddate}}</span></p>
                    </div>
                    {% endif %}
                </div>
                <div class="linebreak"></div>
                <p>
                    {{asset.description}}
                </p>
            </div>
            <div class="col-md-3 p-1" >
                {% if OffsaleAt: %}
                    <p class="m-0 text-secondary mb-2 w-100 text-center" style="font-size: 14px;">Offsale in: <span class="text-danger" id="offsale-countdown">00:00:00</span> <i class="bi bi-alarm"></i></p>
                {% endif %}
                <div class="border rounded p-2 text-center">
                    {% if asset.is_for_sale: %}
                        {% if asset.price_robux == 0 and asset.price_tix == 0: %}
                        <p class="m-0 text-secondary" style="font-size:14px;">Price: <span class="text-white">FREE</span></p>
                        <a class="btn btn-primary fw-bold w-100 btn-sm purchase-button" data-currency-type="0" data-expected-price="{{asset.price_robux}}">Take One</a>
                        {% endif %}
                        {% if asset.price_robux > 0: %}
                        <p class="m-0 text-secondary" style="font-size:14px;">Price: <span class="text-white">{{asset.price_robux}} Robux</span></p>
                        <a class="btn btn-primary fw-bold w-100 btn-sm purchase-button" data-currency-type="0" data-expected-price="{{asset.price_robux}}">Buy with Robux</a>
                        {% endif %}
                        {% if asset.price_robux > 0 and asset.price_tix > 0: %}
                        <div class="d-flex align-items-center mt-2 mb-2">
                            <div class="border-top flex-fill me-2"></div>
                            <p class="text-secondary m-0" style="font-size: 13px;">OR</p>
                            <div class="border-top flex-fill ms-2"></div>
                        </div>
                        {% endif %}
                        {% if asset.price_tix > 0: %}
                        <p class="m-0 text-secondary" style="font-size:14px;">Price: <span class="text-white">{{asset.price_tix}} Tickets</span></p>
                        <a class="btn btn-primary fw-bold w-100 btn-sm purchase-button" data-currency-type="1" data-expected-price="{{asset.price_tix}}">Buy with Tickets</a>
                        {% endif %}
                    {% else: %}
                        {% if asset.is_limited: %}
                            {% if BestPrice != "None": %}
                                <p class="m-0 text-secondary" style="font-size:14px;">Best Price: <span class="text-white">R$ {{BestPrice}}</span></p>
                                {% if BestPriceResult.userid != currentuser.id %}
                                <a class="btn btn-primary fw-bold w-100 btn-sm purchase-button" data-currency-type="0" data-islimited="true" data-expectedowner="{{BestPriceResult.userid}}" data-expectedid="{{BestPriceResult.id}}" data-expected-price="{{BestPrice}}">Buy Now</a>
                                {%else%}
                                <btn class="btn btn-primary fw-bold w-100 btn-sm disabled">Buy with Robux</btn>
                                {%endif%}
                            {%else%}
                            <btn class="btn btn-primary fw-bold w-100 btn-sm disabled">No Resellers Available</btn>
                            {%endif%}
                            {% if userOwnAmountCount > 0: %}
                            <p class="m-0 text-secondary" style="font-size:12px;">( {{userOwnAmountCount}} owned )</p>
                            {%endif%}
                        {%else%}
                        <p class="m-0 text-secondary" style="font-size:14px;">Price: <span class="text-white">Offsale</span></p>
                        <btn class="btn btn-primary fw-bold w-100 btn-sm disabled">Buy with Robux</btn>
                        {%endif%}
                    {% endif %}
                    <p class="m-0 mt-1 text-secondary" style="font-size:12px;">( {{asset.sale_count}} sold )</p>
                </div>
                {% if asset.is_limited and userOwnAmountCount > 0 and not asset.is_for_sale: %}
                    <div class="border rounded p-2 text-center mt-2">
                        <a href="/catalog/resell/{{asset.id}}" class="btn btn-success fw-bold btn-sm w-100">Manage your items</a>
                    </div>
                {%endif%}
            </div>
        </div>
        {% if asset.is_limited and not asset.is_for_sale: %}
        <div class="linebreak mt-3"></div>
        <div class="row">
            <div class="col-md-6">
                <h5>Private Sales</h5>
                {% for sale in PrivateSales: %}
                    <div class="w-100 m-2 d-flex">
                        <img class="rounded-2 overflow-hidden" width="60" height="60" src="/Thumbs/Avatar.ashx?x=60&y=60&userId={{sale.sellerid}}" alt="{{sale.seller}}"/>
                        <div class="ms-2">
                            <a href="/users/{{sale.sellerid}}/profile" class="text-decoration-none text-white m-0">{{sale.seller}}</a>
                            <p class="m-0 text-robux">R$ {{sale.price}}</p>
                            <p class="m-0 text-secondary" style="font-size:13px;">Serial: {%if asset.is_limited_unique: %}{{sale.serial}}{%else%}N/A{%endif%}</p>
                        </div>
                        <div class="ms-auto align-items-center d-flex">
                            {% if sale.sellerid != currentuser.id: %}
                            <button class="btn btn-sm btn-primary purchase-button" data-currency-type="0" data-islimited="true" data-expectedowner="{{sale.sellerid}}" data-expectedid="{{sale.uaid}}" data-expected-price="{{sale.price}}">Buy Now</button>
                            {%else%}
                            <button class="btn btn-sm btn-primary disabled">Buy Now</button>
                            {%endif%}
                        </div>
                    </div>
                {%endfor%}
                <div class="d-flex">
                    {% if PreviousPage > 0: %}
                    <a href="/catalog/{{asset.id}}/?page={{PreviousPage}}" class="ms-auto text-decoration-none">Previous</a>
                    {%else%}
                    <a class="ms-auto text-decoration-none text-secondary">Previous</a>
                    {% endif %}
                    <p class="ms-1 me-1">{{PageNumber}}</p>
                    {% if NextPage > 0: %}
                    <a href="/catalog/{{asset.id}}/?page={{NextPage}}" class="me-auto text-decoration-none">Next</a>
                    {%else%}
                    <a class="me-auto text-decoration-none text-secondary">Next</a>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <p class="m-0 text-secondary" style="font-size:small;">Recent Average Price: <span class="text-robux">R${{AssetRap}}</span></p>
            </div>
        </div>
        {%endif%}
    </div>
</div>
<div class="modal fade" id="purchaseModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="purchase-modal-title">Confirm purchase</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="purchase-modal-content">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="purchase-modal-close" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-success" id="purchase-modal-btn">Purchase</button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}