{% extends 'Application/' ~ settings.get("theme") ~'/base.html.twig' %}

{% block title %}{{item.name}} - {{'Boutique'|trans}}{% endblock %}

{% block body %}
<h1>{{'Boutique'|trans}}</h1>

<div id="shop-background">
<div style="margin-left:947px;margin-top:255px;position:absolute;">
<img src="https://media.tenor.com/sRL5jAfDjMcAAAAj/flame-lit.gif" width="80px" height="80px">
</div>
<div style="margin-left:179px;margin-top:230px;position:absolute;">
<img src="https://media.tenor.com/sRL5jAfDjMcAAAAj/flame-lit.gif" width="50px" height="70px">
</div>
<div id="news" class="read">
   
   

        <div id="shop-icon">
		
		<img src="{{asset("../../../assets/general/gamedata/items/" ~ item.icon)}}" width="80px;" height="80px;">
        </div>
        <div id="shop-title">
		<p>
            <b
                style="text-transform: uppercase;color: #213961;text-shadow: 0 1px 3px rgba(0,0,0,.15);font-size: 25px;font-family: 'Montserrat', 'proxima-nova_bold', Helvetica, Arial, sans-serif;font-weight: 800;">
                {{item.name}}
            </b><br /></div>
			<div id="shop-price">
<b
                style="
				    text-transform: uppercase;
    color: #e57f00;
    text-shadow: 0 1px 3px rgb(255 228 152 / 88%);
    font-family: 'Press Start 2P', monospace;
    font-size: 40px;
    font-weight: 800;
				">
            {{item.price}}
			{{"magic coins"|trans}}
			<div id="shop-sold"> <p  style="text-transform: uppercase;color: #FF0000;text-shadow: 0 1px 3px rgba(0,0,0,.15);font-size: 12px;font-family: 'Montserrat', 'proxima-nova_bold', Helvetica, Arial, sans-serif;font-weight: 800;">
                {{'Solde après achat'|trans}} : {{app.user.points - item.price }}
                {{"points"|trans}}
            </p></div>
</b>
        </p>
		</div>
		<div id="shop-desc">
        <p>
            {{item.description|raw}}
        </p>
</div>
        <p>
        </p>

      <div id="shop-select">
           <div id="shop-select-title"> <font style="text-transform: uppercase;color: #000000;text-shadow: 0 1px 3px rgba(0,0,0,.15);font-size: 15px;font-family: 'Montserrat', 'proxima-nova_bold', Helvetica, Arial, sans-serif;font-weight: 800;">{{"Sélectionner le personnage receveur"|trans}}</font></div>
           
            <div style="margin-left:28px;"><font style="text-transform: uppercase;color: #FF0000;text-shadow: 0 1px 3px rgba(0,0,0,.15);font-size: 13px;font-family: 'Montserrat', 'proxima-nova_bold', Helvetica, Arial, sans-serif;font-weight: 800;">{{"Le personnage doit être connecté pour recevoir l'objet."|trans}}</font></div>
            
                <form method="post">
                    <div class="form-group-mt-3 mb-3">
                        <label for="choose_character mb-3">
                            {{'Sélectionnez un personnage'|trans}}
                        </label>
						<select required id="playerShop" name="playerShop" class="form-control w-100">
                            
                            {% for personnage in personnages %}

                            <option value="{{personnage.Id}}" data-inventory="{{personnage.inventoryFull}}" {% if
                                personnage.inventoryFull %} disabled {% endif %}>
                                {{personnage.Name}} ({{"Niv"|trans}}.{{personnage.Level}})
                                {% if personnage.inventoryFull %}
                                ({{'Inventaire du personnage pleins'|trans}})
                                {% endif %}
                            </option>
                            {% endfor %}

                        </select>
                    </div>
                    <div class="form-group-mt-3 mb-3" id="choose_quantity">
                        <label for="choose_character mb-3">
                            {{'Entrer une quantité'|trans}}
                        </label>
                        <input required type="number" name="quantity" id="quantity" class="form-control bg-light mt-2">
                    </div>

                    <div id="notification" class="alert alert-warning text-dark d-none">
                        {{"L'inventaire pour ce personnage est pleins"|trans}}
                    </div>
</div>
                    <div id="shop-button">
					<button style="padding: 15px 90px!important;" id="submitBuy" class="customBTN  w-100 mb-4"
                        type="sumbit">
                        {{"ACHETER"|trans}}
                    </button></div>
                </form>
          <div style="    width: 70%;
    margin-left: 150px;
    margin-top: 38px;">
         {% for message in app.flashes('success') %}
    <div class="alert alert-success shadow text-dark alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        {{ message }}
    </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
    <div class="alert alert-danger shadow text-dark alert-dismissible fade show">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        {{ message }}
    </div>
    {% endfor %}
  </div>
    <div class="clear"></div>
</div>
</div>
{% endblock %}