{% extends "AppBundle::layout.html.twig" %}
{% block body%}
    <div class="container-fluid">
        <div class="row">
            <div class="row">
                <div class="col-md-4">
                    <a href="{{path("app_pack_index")}}" class="btn btn-rose btn-lg pull-right add-button col-md-12" title=""><i class="material-icons" style="font-size: 30px;">arrow_back</i> PACK LIST </a>
                </div>
                <div class="col-md-4">
                    <a class="btn btn btn-lg btn-yellow col-md-12"><i class="material-icons" style="font-size: 30px;">inbox</i> {{count}} Sticker(s)</a>
                </div>
                <div class="col-md-4">
                    <a href="{{path("app_pack_stickers",{"id":app.request.get("id")})}}" class="btn  btn-lg btn-warning col-md-12"><i class="material-icons" style="font-size: 30px;">refresh</i> Refresh</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header card-header-icon" data-background-color="rose">
                            <i class="material-icons">inbox</i>
                        </div>
                        <div class="card-content">
                            <h4 class="card-title">{{pack.name}} stickers  <span class="label label-danger label-lg pull-right" style="font-size:14px;">{{pack.sizes}}</span></h4>
                            <br>
                            <br>
                            <div>
                                <div class="pack-image" style="    margin-top: 12px;">
                                    <div class="path-image-img"><img src="{{asset(pack.image.link)|imagine_filter('sticker_image')}}" class="thumbnail" id="img-preview"><img src="{{asset(pack.image.link)|imagine_filter('tray_image')}}" style="display:none"></div>
                                </div>
                                <div class="form-right-view">
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Pack name</label>
                                        <input name="name" class="form-control" value="{{pack.name}}" readonly="true">
                                    </div>
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Pack publisher</label>
                                        <input name="publisher" class="form-control" value="{{pack.publisher}}" readonly="true">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Publisher E-mail</label>
                                        <input name="name" class="form-control" value="{{pack.publisheremail}}" readonly="true">
                                    </div>
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Publisher Website</label>
                                        <input name="publisher" class="form-control" value="{{pack.publisherwebsite}}" readonly="true">
                                    </div>
                            </div>
                            <div class="col-md-6">
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Website privacy policy</label>
                                        <input name="name" class="form-control" value="{{pack.privacypolicywebsite}}" readonly="true">
                                    </div>
                                    <div class="form-group label-floating ">
                                        <label class="control-label">Website license agreement</label>
                                        <input name="publisher" class="form-control" value="{{pack.licenseagreementwebsite}}" readonly="true">
                                    </div>
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.enabled %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Enabled</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Disabled</span>
                                {% endif %}
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.premium %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Premium Pack</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Free Pack</span>
                                {% endif %}
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.animated %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Animated Pack</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Static Pack</span>
                                {% endif %}
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.whatsapp %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Enabled for Whatsapp</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Disabled for Whatsapp</span>
                                {% endif %}
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.telegram %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Enabled Telegram</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Disabled for Telegram</span>
                                {% endif %}
                            </div>
                            <div class="col-md-4">
                                <br>
                                {% if pack.signal %}
                                    <i class="material-icons" style="color:green;float:left">check_circle</i> <span class="check-label">Enabled for Signal</span>
                                {% else %}
                                    <i class="material-icons" style="color:red;float:left">cancel</i> <span class="check-label">Disabled for Signal</span>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <h4>Categories : </h4>
                                {% for category in pack.categories %}
                                    <span class="label label-rose " style="margin:5px;"> <b> {{category.title}} </b></span>  
                                {% endfor %}
                                <br>
                                <br>
                                <br>
                            </div>
                            <div class="col-md-6" >
                                <h4>Tags : </h4>
                                {% for tag in pack.tagslist %}
                                    <span class="label label-rose " style="margin:5px;"> <b> {{tag.name}} </b></span>  
                                {% endfor %}
                                <br>
                                <br>
                                <br>
                            </div>  
                            <hr>
                            <div class="card-footer">
                                <div class="wallpaper-logo" >
                                    {% if pack.user.image == "" %}
                                        {{pack.user.name}}
                                    {% else %}
                                        <img src="{{pack.user.image}}" class="avatar-img" alt=""> 
                                    {% endif %}
                                    <span style="    line-height: 26px;font-size: 16px;">{{pack.user.name}}</span>
                                    <span style="    line-height: 26px;font-size: 16px;">|</span>
                                    <span style="    line-height: 26px;font-size: 16px;">{{pack.created|ago}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            <div class="col-md-12">
                <div class="card" >
                    <div class="status-bar"></div>
                    <div class="action-bar">
                        <a href="#" class="zmdi zmdi-star"></a>
                    </div>
                    {% set rate  =  rating %}
                    {% set rate_main  =  rating %}
                    <div class="list-group lg-alt lg-even-black">
                        <br>
                        <center>
                        </center>
                        <table width="100%" >
                            <tr>
                                <td colspan="2" style="padding: 15px;" align="right">
                                    <div style="/* float: left; */display: inline-flex;">
                                        {% for i in 1..5 %}
                                            {% if rate >= 1 %}
                                                <img src="{{asset("img/star.png")}}" style="height:50px;width:50px">
                                            {% endif %}
                                            {% if rate >= 0.25 and  rate < 0.75 %}
                                                <img src="{{asset("img/star_h.png")}}" style="height:50px;width:50px">
                                            {% endif %}
                                            {% if rate >= 0.75 and  rate < 1 %}
                                                <img src="{{asset("img/star.png")}}" style="height:50px;width:50px">
                                            {% endif %}
                                            {% if rate < 0.25 %}
                                                <img src="{{asset("img/star_e.png")}}" style="height:50px;width:50px">
                                            {% endif %}
                                            {% set rate  =  rate - 1 %}
                                        {% endfor %}
                                    </div>

                                </td>
                                <td>
                                    <span style="height: 28px;display: inline-block;font-size: 30pt;font-weight: bold;padding-left: 20px;">Rating : {{rate_main|number_format(1, '.', ',')}}</span>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" align="right" style="padding: 5px;">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                </td>
                                <td width="30px" align="center">{{ratings.rate_5}}</td>
                                <td  align="left" style="padding:10px">
                                    <span style="display:block;height:15px;background-color:#ea1f62;width:{{values.rate_5}}%"></span>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" align="right" style="padding: 5px;">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                </td>
                                <td width="30px" align="center">{{ratings.rate_4}}</td>
                                <td  align="left" style="padding:10px">
                                    <span style="display:block;height:15px;background-color:#ea1f62;width:{{values.rate_4}}%"></span>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" align="right" style="padding: 5px;">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                </td>
                                <td width="30px" align="center">{{ratings.rate_3}}</td>
                                <td  align="left" style="padding:10px">
                                    <span style="display:block;height:15px;background-color:#ea1f62;width:{{values.rate_3}}%"></span>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" align="right" style="padding: 5px;">
                                    
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                </td>
                                <td width="30px" align="center">{{ratings.rate_2}}</td>
                                <td  align="left" style="padding:10px">
                                    <span style="display:block;height:15px;background-color:#ea1f62;width:{{values.rate_2}}%"></span>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" align="right" style="padding: 5px;">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star_e.png")}}" style="height:30px;width:30px">
                                    <img src="{{asset("img/star.png")}}" style="height:30px;width:30px">
                                </td>
                                <td width="30px" align="center">{{ratings.rate_1}}</td>
                                <td  align="left" style="padding:10px">
                                    <span style="display:block;height:15px;background-color:#ea1f62;width:{{values.rate_1}}%"></span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                {% for sticker in stickers %}
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-content">
                                <h3></h3>
                                <img src="{{asset(sticker.media.link)}}" style="width:100%; height:auto;    border-radius: 5px;border:1px solid #ccc;padding:10px" >
                                <br>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endblock%}