{% extends "Intranet/Global.php.twig" %}



{% block header %}
    <title>Back Office | About Carpenters</title>

    <script src="js/ckeditor/ckeditor.js"></script>

{% endblock %}



{% block body %}



    <div class="col-lg-3">


        {#<div style="height:30px">#}
            {#<a href="Contact">#}
                {#<button type="button" class="btn btn-xs" aria-label="Right Align">#}
                    {#<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Contact#}
                {#</button>#}
            {#</a>#}


        {#</div>#}

        {#<div class="list-group" id="list-contact">#}

            {#{% for val in listContacts %}#}
                {#<a href="Contact?{{ val.contactId }}" id="item-{{ val.contactId }}"#}
                   {#class="list-group-item {{ val.onlineCwg==0 ? 'bg-stripped' : '' }} {{ selectedId==val.ArtistId ? 'active' : '' }} ">{{ val.city() }} </a>#}
            {#{% endfor %}#}

        {#</div>#}

    </div>


<form id="form-edit-about" data-moussabind="moussajax.moussaForm"
      data-messageTarget="box-form-contat"
        data-entity="About" >

    <input type="hidden" name="aboutId" id="aboutId" value="{{ about.aboutId }}"/>
    <input type="hidden" name="h" id="h" value="false"/>
    <input type="hidden" name="w" id="w" value="false"/>
    <input type="hidden" name="x" id="x" value="false"/>
    <input type="hidden" name="y" id="y" value="false"/>
    <input type="hidden" name="tempMediaId" id="tempMediaId" value="false"/>
    <input type="hidden" name="recropMediaId" id="recropMediaId" value="false"/>

    <div class="col-lg-9">

        <div class="row">
            <div class="col-xs-7 col-sm-7">
                <div class="base-box" id="box-form-contat">

                    {#{{ about.getOneMedia().getUrl() }}#}

                    <h1>About</h1>



                    <br/>
                    <br/>




                    {% include 'Input/ckeditor.twig'  with {'type':'text', 'class': 'form-group', 'label': 'About', 'idName':'caption', 'value':about.caption } %}


                    <script>
                        CKEDITOR.inline('caption');

                    </script>

                    <div style="text-align: right;">
                        <button type="button" id="saveContact" data-ajax-form="form-edit-about"
                                class="btn btn-default btn-success"
                                aria-label="Left Align">
                            <span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save
                        </button>

                        <button type="button" id="previewHome"
                                data-preview-url="{{ R.url('cwgHome',{'context' : 'Web',param: ['preview'] }) }}"
                                class="btn btn-default btn-info"
                                aria-label="Left Align">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Preview
                        </button>

                        {#<button type="button" id="deleteContact" class="btn btn-default btn-danger"#}
                                {#data-moussabind="moussajax.moussaConfirm"#}
                                {#data-content="Etes-vous sûr de supprimer ce contact : <b>{{ selectedItem.city }}</b> ?"#}
                                {#data-title="Delete Contact"#}
                                {#data-url="{{ R.url('genericAjaxEntityDelete',{'context' : 'Intranet',param: ['Contact', selectedItem.contactId] }) }}"#}
                                {#aria-label="Right Align">#}
                            {#<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete#}
                        {#</button>#}
                        <br/>
                        <br/>
                    </div>


                </div>
            </div>

            <div class="col-xs-5 col-sm-5">






                <div class="base-box firstPhoto">

                    <h1>FIRST PHOTO</h1>

                    <div class="spinner" id="spinner-home">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div>




                    {% include 'MoussaModule/Stepso2o.php.twig' with { 'Entity':'About', 'EntityId': about.aboutId,'prefix':'ustepMediaId','o2o':1 } %}




                    {#<button type="button" data-action="reloadImage" class="btn btn-default btn-info reloadFirstPhoto" aria-label="Left Align">#}
                        {#<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Reload original picture#}
                    {#</button>#}

                    {{ R.js('moussajax/moussaDrop') }}
                    {{ R.js('moussajax/moussaCrop') }}
                    {{ R.js('moussajax/moussaDropnCrop') }}
                    {{ R.js('moussajax/moussaSortable') }}


                    {#<div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"#}
                         {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                         {#data-getinject="aboutId" data-entity="About"#}
                         {#&#123;&#35;data-resultratio=".7"&#35;&#125;#}
                            {#&#123;&#35;data-resultWidth="1350"&#35;&#125;#}
                            {#&#123;&#35;data-resultHeight="1350"&#35;&#125;#}
                    {#>#}


                        {#<img src="{{ about.getOneMedia().getUrl()}}"#}
                             {#data-media-id="{{ about.getOneMedia().getMediaId() }}"#}
                             {#data-id="{{ about.getOneMedia().getMediaId() }}"#}
                             {#data-parent-id="{{ about.getOneMedia().getParentId() }}"#}
                             {#style="max-width: 100%" id='imgToCrop-'#}
                             {#class="cropimg imgToCrop"/>#}


                    {#</div>#}


                    {#  <div style="height:350px;" data-moussabind="moussajax.moussaDropnCrop"
                           data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                           data-getinject="eventId" data-entity="Event" data-resultWidth="300" data-resultHeight="200"
                           class="border-dashed">
                          <img src="{{ exhibition.getFirstPhoto().getUrl() }}" style="max-width: 100%">
                      </div>#}

                    <h4><span class=" label label-info">Drag your photo <span class="badge">1350px X 1350px</span>
                    </span></h4>


                    <p class="text-danger"></p>


                </div>









                {#<div class="base-box">#}

                    {#<h1>FIRST PHOTO</h1>#}

                    {#<div class="spinner" id="spinner-home">#}
                        {#<div class="rect1"></div>#}
                        {#<div class="rect2"></div>#}
                        {#<div class="rect3"></div>#}
                        {#<div class="rect4"></div>#}
                        {#<div class="rect5"></div>#}
                    {#</div>#}

                    {#<button type="button" data-action="reloadImage" class="btn btn-default btn-info" aria-label="Left Align">#}
                        {#<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Reload original picture#}
                    {#</button>#}

                    {#<div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"#}
                         {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                         {#data-getinject="aboutId" data-entity="About" data-resultWidth="1420" data-resultHeight="1000">#}


                        {#<img src="{{ about.getOneMedia().url }}" style="max-width: 100%" id=''#}
                             {#class="cropimg imgToCrop"/>#}


                    {#</div>#}



                    {#<h4><span class=" label label-info">Drag your photo <span class="badge">1400px X 10000px</span>#}
                    {#</span></h4>#}


                    {#<p class="text-danger"></p>#}


                {#</div>#}

            </div>
        </div>

    </div>



    {{ R.js('helpers') }}
    {{ R.js('vendor/*') }}
    {{ R.js('moussajax/moussaDrop') }}
    {{ R.js('moussajax/moussaCrop') }}
    {{ R.js('moussajax/moussaDropnCrop') }}
    {{ R.js('moussajax/moussaForm') }}
    {{ R.js('moussajax/moussaModal') }}
    {{ R.js('moussajax/moussaConfirm') }}
    {{ R.css('moussajax/moussaModal') }}

    <link rel="stylesheet" type="text/css" href="/admin/css/cropit/cropimg.css" media="all"/>

{% endblock %}