{% extends('Default/layout.html.twig') %}

{% block title %}Share{% endblock %}

{% block head %}
    <link href="{{ asset('assets/css/dialog.css') }}" rel="stylesheet">
    <script src="{{ asset('assets/data/lib/vuejs/2.5.13/vue.js') }}"></script>
    <script src="{{ asset('assets/data/lib/axios/axios.js') }}"></script>
{% endblock %}

{% block body %}
    <style>
        body {
            width:500px;
            min-height:280px;
            height:auto;
            background:white;
            overflow: hidden;
        }

    </style>
    <div class="container" id="dialog-get-link">
        <div class="row">
            <div class="col s12">
                <h5>Partage par lien</h5>
                <div class="switch">
                    <label>
                        Off
                        <input @change="toggled($event)" v-model="chkState" type="checkbox">
                        <span class="lever"></span>
                        On
                    </label>
                </div>

                <div class="d-l">Lorsque cette option est activé tous les utilisateurs disposant du lien ont accès au fichier.</div>
                <div class="d-sb-t">
                    <div class="input-field" v-bind:class="{ shared: chkState }">
                        Lien de partage
                        <input onClick="this.setSelectionRange(0, this.value.length)" readonly :value="link" id="first_name" type="text" class="active">
                    </div>
                </div>
                <transition name="fade">
                    <div v-if="chkState" class="d-sb-t">
                        <div class="s-m-l">Partagez aussi via :</div>
                        <div class="s-m-ma">
                            <a class="mdi mdi-facebook-box mdi-36px facebook-color tooltipped"
                               data-position="top" data-delay="50" data-tooltip="Facebook"
                               href="/"></a>
                            <a class="mdi mdi-twitter mdi-36px twitter-color tooltipped"
                               data-position="top" data-delay="50" data-tooltip="Twitter"
                               href="/"></a>
                            <a class="mdi mdi-google-plus mdi-36px gplus-color tooltipped"
                               data-position="top" data-delay="50" data-tooltip="Google +"
                               href="/"></a>
                            <a class="mdi mdi-email mdi-36px email-color tooltipped"
                               data-position="top" data-delay="50" data-tooltip="Email"
                               href="/"></a>
                        </div>
                    </div>
                </transition>

            </div>
        </div>
    </div>
    <style>
             .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0
        }

        .twitter-color {
            color:#00aced!important;
        }
        .facebook-color {
            color:#3b5998!important;
        }

        .gplus-color {
            color:#d62d20!important;
        }

        .email-color {
            color:#acb6bf!important;
        }

        .switch{
            position: absolute;
            top: 12px;
            right: 2px;
        }
        .shared input {
            background: #badea636!important;
            color: #4caf50!important;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        var inIframe = (window!=window.top);

        //inIframe = true;

        if(inIframe){
            console.log(parent.StoreContainer);
            var vmDialogGetLink= new Vue({
                delimiters: ['${', '}'],
                el: '#dialog-get-link',
                data:{
                    storeContainer: parent.StoreContainer,
                    chkState: false,
                    link: "test",
                    fileInfo: undefined,
                },
                created: function () {
                    console.log('vmDialogGetLink created');
                },
                mounted: function(){
                  var self = this;

                  self.getInfo();
                },
                computed: {
                  useless: function(){
                      return false;
                  }
                },
                methods: {
                    toggled: function(e){
                        var self = this;
                        axios.post(GLOBAL_urlPrefix + 'public/api/file-manager/' + FM_current_file_guid,
                            { permission: Number(self.chkState) })
                            .then(function(response) {
                                //console.log(response.data);
                                self.getInfo();
                            }).catch(function(err) {
                            console.log(err);
                        });//*/
                    },
                    update: function(){
                        var self =this;

                        if(self.fileInfo.permission >= 1)
                            self.chkState = true;
                        else
                            self.chkState = false;

                        self.link = self.fileInfo.display;

                        setTimeout(function(){$('.tooltipped').tooltip({delay: 50});},200);
                    },
                    getInfo: function(){
                        var self = this;
                        axios.get(GLOBAL_urlPrefix + 'public/api/file-manager/' + FM_current_file_guid)
                            .then(function(response) {
                                if(response.data != undefined
                                    && (response.data.error == undefined || response.data.error !== true)
                                ){
                                    self.fileInfo = response.data;
                                    self.update();
                                } else {
                                    //self.displayError(response.data.msg);
                                }
                            }).catch(function(err) {
                            //self.notification(err,4000,2);
                        });//*/
                    }
                }
            });
        } else {
            $('body').html('');
        }


    </script>
{% endblock %}