{% extends '__layout__.html' %}
{% block title %}Avatar{% endblock %}
{% block head %}
<link href="/static/css/avatar.css" rel="stylesheet"/>
<script src="/static/js/AvatarEditor.js?ver=4"></script>
<div class="col-3 p-1 asset-card-template" style="display:none;">
    <div class="position-relative">
        <img width="100%" src="" class="asset-card-img rounded" alt="Item">
        <button class="btn btn-sm btn-primary position-absolute p-1 asset-card-button" style="top:10px;right:20px;">Wear</button>
    </div>
    <a class="text-decoration-none m-0 text-center w-100 asset-card-assetname" href="/catalog/12345676/" style="font-size:12px;">Test Item</a>
</div>
{% endblock %}
{% block content %}
<div id="main">
    <div class="container" style="max-width:900px;">
        <h1>Avatar</h1>
        <div class="row">
            <div class="col-md-4">
                <div class="position-relative">
                    <img width="100%" style="height:auto;" class="rounded border p-1" id="avatar-image" src="/Thumbs/Avatar.ashx?x=420&y=420&userId={{user.id}}" alt="Your Avatar">
                    <div class="position-absolute w-100" style="bottom:20px;display:none;" id="render-waiting-text">
                        <p class="fw-bold rounded text-white text-center m-0 ms-auto me-auto p-1 border" style="width:fit-content;background-color:rgba(31,31,31,0.5);">Rendering in progress</p>
                    </div>
                    <button class="btn btn-secondary position-absolute" style="top:20px;right:20px;aspect-ratio:1/1;padding:0;width:35px;height:35px;text-align:center;" id="change-rigtype-btn">R15</button>
                </div>
                <button class="btn btn-primary btn-sm w-100 mt-1" id="savechanges-btn" onclick="UpdateAvatar()" style="display:none;">Save Changes</button>
                <div class="mt-1">
                    <p class="m-0" style="font-size:small;">Avatar isn't loading? <a class="text-decoration-none" style="cursor:pointer;" onclick="RedrawAvatar()">Redraw</a></p>
                    <div class="w-100 mt-3 position-relative" style="min-height:360px;">
                        <h5>Body Colors</h5>
                        <div class="overlay p-1" id="color-picker-overlay" style="display:none;">
                            <div class="d-flex align-items-center">
                                <h5 class="text-center m-0 ms-4">Select Body Color</h5>
                                <div class="ms-auto">
                                    <button class="btn btn-secondary btn-sm" id="color-picker-close">✕</button>
                                </div>
                            </div>
                            <div class="row p-2" id="color-picker-content"></div>
                        </div>
                        <div class="head" id="head-bodycolor"></div>
                        <div class="torso" id="torso-bodycolor">
                            <div class="leftArm" id="rightarm-bodycolor"></div>
                            <div class="rightArm" id="leftarm-bodycolor"></div>
                        </div>
                        <div class="legs">
                            <div class="leftLeg" id="rightleg-bodycolor"></div>
                            <div class="rightLeg" id="leftleg-bodycolor"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <select class="form-control mb-1" id="select-tab-input">
                    <option data-tab="1">Wear</option>
                    <option data-tab="2">Scaling</option>
                </select>
                <div id="equip-assets-tab">
                    <select class="form-control" id="select-asset-type">
                        <option data-type="17">Head</option>
                        <option data-type="18">Faces</option>
                        <option data-type="2">T-Shirts</option>
                        <option data-type="11" selected>Shirts</option>
                        <option data-type="12">Pants</option>
                        <option data-type="19">Gear</option>
                        <option data-type="8">Hats</option>
                        <option data-type="41">Hair Accessory</option>
                        <option data-type="42">Face Accessory</option>
                        <option data-type="43">Neck Accessory</option>
                        <option data-type="44">Shoulder Accessory</option>
                        <option data-type="45">Front Accessory</option>
                        <option data-type="46">Back Accessory</option>
                        <option data-type="47">Waist Accessory</option>
                        <option data-type="27">Torso</option>
                        <option data-type="29">Left Arms</option>
                        <option data-type="28">Right Arms</option>
                        <option data-type="30">Left Legs</option>
                        <option data-type="31">Right Legs</option>
                    </select>
                    <div class="row" id="assets-card-holder"></div>
                    <div class="align-items-center d-flex justify-content-center">
                        <button class="btn btn-sm btn-primary me-2" id="pagination-back-btn" disabled>Previous</button>
                        <p class="m-0" id="pagination-page-number">Page 1</p>
                        <button id="pagination-next-btn" class="btn btn-sm btn-primary ms-2" disabled>Next</button>
                    </div>
                    <div class="linebreak"></div>
                    <h5>Currently Wearing</h5>
                    <div class="row" id="currentlywearing-card-holder"></div>
                </div>
                <div id="avatar-scaling-tab" style="display:none;">
                    <div id="height-scale-group">
                        <div class="d-flex align-items-center">
                            <label class="form-label">Height</label>
                            <p class="m-0 ms-auto scaling-value">100%</p>
                        </div>
                        <input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
                    </div>
                    <div id="width-scale-group">
                        <div class="d-flex align-items-center">
                            <label class="form-label">Width</label>
                            <p class="m-0 ms-auto scaling-value">100%</p>
                        </div>
                        <input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
                    </div>
                    <div id="head-scale-group">
                        <div class="d-flex align-items-center">
                            <label class="form-label">Head</label>
                            <p class="m-0 ms-auto scaling-value">100%</p>
                        </div>
                        <input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
                    </div>
                    <div id="proportion-scale-group">
                        <div class="d-flex align-items-center">
                            <label class="form-label">Proportion</label>
                            <p class="m-0 ms-auto scaling-value">100%</p>
                        </div>
                        <input type="range" class="form-range scaling-slider" min="0" max="5" step="0.5">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
