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

{% block body %}

    {{ R.js('moussajax/moussaSwitch') }}

    <script src="js/ckeditor/ckeditor.js"></script>
    {#  <link href="css/editArtist.css" rel="stylesheet">#}


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

        {#<div class="input-group">#}
        {##}
        {#<input type="text" class="form-control" id="autoSearchHome"#}
        {#placeholder="Search Artist to highlight"#}
        {#aria-describedby="basic-addon2">#}
        {#<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search "#}
        {#aria-hidden="true"></span></span>#}
        {#</div>#}

        <div class="list-group">

            <div id="menu">
                {% include 'Intranet/Artist/Menu.php.twig' with ({'selectedID':artist.artistId}) %}
            </div>

        </div>

    </div>

    <form id="form-edit-artist" data-moussabind="moussajax.moussaForm" data-messageTarget="box-form-artist"
          data-entity="Artist" {#data-url="{{ R.url('ajaxSaveEditArtist',{'context' : 'Intranet',param: {} }) }}"#}>

    <input type="hidden" name="new" id="new" value="{{ new }}"/>

    <input type="hidden" id="artistId" name="artistId" value="{{ artist.artistId }}">

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

    <div class="row">
    <div class="col-xs-7 col-sm-7">
        <div class="base-box" id="box-form-artist">
            <h1>{{ artist.firstname() }} {{ artist.lastname }}
                <div style="float:right;">
                    <a href="Artist?{{ artist.artistId }}">
                        <button type="button" id="listWork" class="btn btn-xs right"
                                aria-label="Right Align">
                            <span class="glyphicon glyphicon-list" aria-hidden="true"></span> List of works
                        </button>
                    </a></div>
            </h1>

            <br/>

                    <span checks>
                        <label></label>


                        <input type="checkbox" name="onlineCwg" id="onlineCwg"
                               data="onlineCwg"
                               data-moussabind="moussajax.moussaSwitch"
                               data-field="exhibition.onlineCwg"
                               id="onlineCwg" {{ artist.onlineCwg==1 ? 'checked' : '' }}>

                        <input type="checkbox" name="onlineCollection" id="onlineCollection"
                               data="onlineCollection"
                               data-moussabind="moussajax.moussaSwitch"
                               data-field="exhibition.onlineCollection"
                               id="onlineCollection" {{ artist.onlineCollection==1 ? 'checked' : '' }}>

                        <input type="checkbox" name="onlineArtbinder" id="onlineArtbinder"
                               data="onlineArtbinder"
                               data-moussabind="moussajax.moussaSwitch"
                               data-field="exhibition.onlineArtbinder"
                               id="onlineArtbinder" {{ artist.onlineArtbinder==1 ? 'checked' : '' }}>



                    </span>

            <br/>
            <br/>

            <div class="form-group">
                <label>Firstname</label>
                <input type="text" name="firstname" id="firstname" class="form-control"
                       placeholder="First name"
                       value="{{ artist.firstname }}">
            </div>

            <div class="form-group">
                <label>Lastname</label>
                <input type="text" name="lastname" id="lastname" class="form-control"
                       placeholder="Last name"
                       value="{{ artist.lastname }}">
            </div>
            <br/>

            <div style="text-align: right;">
                <button type="button" id="saveHome" data-ajax-form="form-edit-artist"
                        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="deleteArtist" class="btn btn-default btn-danger"
                        data-moussabind="moussajax.moussaConfirm"
                        data-content="Etes-vous sûr de supprimer cet Artist ?<br/><i>(Cela supprimera toutes ses oeuvres)</i><b>{{ selectedItem.title }}</b> ???"
                        data-title="Delete Artist"
                        data-url="{{ R.url('genericAjaxEntityDelete',{'context' : 'Intranet',param: ['Artist', artist.artistId] }) }}"
                        aria-label="Right Align">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                </button>
            </div>
            <br/>


        </div>

        <br/>

        <div class="base-box">
            <h1>ABOUT</h1>

            <div style="padding: 10px;">
                <textarea name="about" id="about" rows="10" cols="80"
                          style="height:250px;border: 1px dashed gray; margin:10px;">
                    {{ artist.about }}
                </textarea>
            </div>


        </div>
        <br/>

        <div class="base-box">
            <h1>BIOGRAHY</h1>

            <br/>


            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">Biography 1</a></li>
                <li><a href="#profile" data-toggle="tab">Biography 2</a></li>
            </ul>

            <div id='content' class="tab-content">
                <div class="tab-pane active" id="home" style="padding: 10px;">
                    <textarea name="bio1" id="bio1" style="width:95%;height:250px;">
                        {{ artist.bio1 }}
                    </textarea>
                </div>
                <div class="tab-pane" id="profile" style="padding: 10px;">
                    <textarea name="bio2" id="bio2" style="width:100%;height:250px;">
                        {{ artist.bio2 }}
                    </textarea>
                </div>

            </div>

        </div>

        <script>
            CKEDITOR.inline('about');
            CKEDITOR.inline('bio1');
            CKEDITOR.inline('bio2');

        </script>
        <style>.cke_textarea_inline {
                height: 300px;
                overflow: scroll;
            }</style>

        <br/>


    </div>
    <div class="col-xs-5 col-sm-5">
        {#<div class="base-box">#}
            {#&#123;&#35;Ajout Drop'n'Crop comme dans la page Works (avec mask comme : category-home-mask.png)<br/>&#35;&#125;#}
            {#&#123;&#35;le champs associé est Gray_Media_id&#35;&#125;#}
            {#&#123;&#35;<div class="border-dashed">Drag image</div>&#35;&#125;#}

            {#COUCOCu#}

        {#</div>#}
        <br/>

        <div class="base-box" id="base-crop-photo">





            <span id="save-image" data-entity="Artist" data-moussabind="moussajax.moussaForm"
                  data-refresh-url="{{ R.url('randomWorksImg') }}">

                <input id="ArtistId" type="hidden" value="{{ artist.artistId }}" name="ArtistId">
                <input id="save-imagerecropMediaId" type="hidden" value="false" name="recropMediaId">

                <input id="save-imageh" type="hidden" value="false" name="h">
                <input id="s" type="hidden" value="ustepslkdsj" name="prefix">
                <input id="save-imagew" type="hidden" value="false" name="w">
                <input id="save-imagex" type="hidden" value="false" name="x">
                <input id="save-imagey" type="hidden" value="false" name="y">
                <input id="save-imagetempMediaId" type="hidden" value="false" name="tempMediaId">
                <input id="save-imageforceField" type="hidden" value="GrayMediaId" name="forceField">


                <input id="mobilerecropMediaId" type="hidden" value="false" name="mobilerecropMediaId">

                {#<input id="save-imageh" type="hidden" value="false" name="h">#}
                <input id="s" type="hidden" value="ustepslkdsj" name="prefix">
                <input id="mobilew" type="hidden" value="false" name="mobilew">
                <input id="mobileh" type="hidden" value="false" name="mobileh">
                <input id="mobilex" type="hidden" value="false" name="mobilex">
                <input id="mobiley" type="hidden" value="false" name="mobiley">
                <input id="mobiletempMediaId" type="hidden" value="false"      name="mobiletempMediaId">
                <input id="mobileforceField" type="hidden" value="GrayMediaId" name="mobileforceField">



            </span>



            <h1>PHOTO GRISEE</h1>
            {#<h1>PHOTOS</h1>#}

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

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

            <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>

            <button class="btn btn-default btn-success" aria-label="Left Align" data-ajax-form="save-image" type="button" id="btn-save-img" style="display:block">
                Save
            </button>
            {{ R.js('moussajax/moussaCrop') }}
            {{ R.js('moussajax/moussaDropnCrop') }}




            <div class="drag-zone border-dashed" data-moussabind="moussajax.moussaDropnCrop"
                 data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"
                 data-inputprefix="save-image"
                 data-getinject="artistId" data-imageMask="medias/category-crop-mask.png" data-entity="Artist">


                <img style=";width: 350px " src="{{ grayMedia.getUrl('350x0') }}" id='' class="cropimg imgToCrop"
                     data-media-id="{{ grayMedia.mediaId }}" data-parent-id="{{ grayMedia.parentId }}"/>


            </div>

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


            <br />
<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-inputprefix="mobile"
                 data-resultratio="1.8"
                 data-getinject="artistId"
                 {#data-imageMask="medias/home-crop-mask.png" #}
                 data-entity="Artist">

                {% set mobileGrayMedia = artist.getOneMobileGrayMedia() %}
                <img style=";width: 350px " src="{{ mobileGrayMedia.getUrl('350x0') }}" id='' class="cropimg imgToCrop"
                     data-media-id="{{ mobileGrayMedia.mediaId }}" data-parent-id="{{ mobileGrayMedia.parentId }}"/>


            </div>
        </div>

</div>

    <br/>

    <div class="base-box">
        <h1>FIRST PHOTO</h1>




        {% include 'MoussaModule/Stepso2o.php.twig' with { 'Entity':'Artist', 'EntityId': artist.artistId,'prefix':'ustepMediaId','o2o':1 } %}



        {#celui là doit être en crop steps#}
        {#{{ R.jsOnce('dnc') }}#}
        {#<div class="dnc">#}

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


            {#<input type="hidden" name="recropMediaId" id="recropMediaId" value="false"/>#}
            {#<input type="hidden" name="ArtistId" value="{{ artist.artistId }}"/>#}
            {#<input id="h" type="hidden" value="false" name="h">#}
            {#<input id="w" type="hidden" value="false" name="w">#}
            {#<input id="x" type="hidden" value="false" name="x">#}
            {#<input id="y" type="hidden" value="false" name="y">#}
            {#<input id="y" type="hidden" value="false" name="y">#}

            {#<input id="tempMediaId" class="tempMediaId" type="hidden" value="false" name="tempMediaId">#}


            {#<div class="drag-zone border-dashed firstPhoto" data-moussabind="moussajax.moussaDropnCrop"#}
                 {#data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}"#}
                 {#data-getinject="artistId"#}
                 {#data-entity="Artist"#}
                 {#class="border-dashed">#}
                {#<img src="{{ artist.getFirstPhoto().getUrl() }}" style="max-width: 100%"#}

                     {#data-media-id="{{ artist.getFirstPhoto().getMediaId }}"#}
                     {#data-parent-id="{{ artist.getFirstPhoto().parentId() }}"#}


                     {#class="cropimg imgToCrop"/>#}
            {#</div>#}

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


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

        {#</div>#}
    </div>

    <br/>

    <div class="base-box blocking" {{ (artist.artistId is empty)? 'disabled="disabled"' }}>
        <h1>PHOTO/VIDEO</h1>


        {% include 'MoussaModule/Steps.php.twig' with { 'Entity':'Artist', 'EntityId': artist.artistId,'prefix':'steps' } %}

        {#<div id="drop-crop-photo-video" style="height:50px;" data-moussabind="moussajax.moussaDrop" data-url="{{ R.url('ajaxSaveDropImage',{'context' : 'Intranet'}) }}" data-getinject="artistId" data-entity="Artist" data-autoSave class="border-dashed">#}
        {#Drop image#}
        {#</div>#}




        {#<div class="drag-zone">#}

        {#<img style="display: none;width: 878px " src="{{ media.url }}" id=''#}
        {#class="cropimg imgToCrop"/>#}


        {#</div>#}

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


        {#<div id="sortPhotoVideo" data-url="{{  R.url('rellIndexAjax') }}" data-moussabind="moussajax.moussaSortable"#}
        {#data-messageTarget="list-works-box" data-placeholder="ui-state-highlight-box"  data-item="" data-handle=".drag" data-ent1="Artist" data-ent2="Media" data-ent1id="{{ artist.artistId }}">#}



        {#{% include '/Intranet/ArtistAjax/ajaxLoadThumbsPhotoArtist.php.twig' %}#}

        {#</div>#}


    </div>
    <br/>

    <div class="base-box">
        <h1>MORE</h1>

        <div class="drag-zone">


            NO DOC


        </div>
    </div>
    <br/>

    <div class="base-box">
        <h1>PDF DOCUMENTS</h1>

        <img style="width: 30px " src="medias/pdf-icon.png" id='' class="cropimg imgToCrop"/>
    </div>
    <br/>

    </div>
    </div>
    </form>


    {{ R.js('helpers') }}
    {{ R.js('vendor/*') }}
    {{ R.js('moussajax/moussaDrop') }}
    {{ R.js('moussajax/moussaCrop') }}
    {{ R.js('moussajax/moussaDropnCrop') }}
    {{ R.js('moussajax/moussaSortable') }}
    {{ 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 %}