{extends file='page.tpl'}

{block name="header"}
    <script src="{'js/vue.min.js'|resource}"></script>
    <script src="{'js/moment-with-locales.min.js'|resource}"></script>
{/block}

{block name=main}
    <script type="text/x-template" id="poll-finder-component">
        <div>
            <h3>
                {__('FindPolls', 'Polls saved inside this browser')}
                <a href="#" data-toggle="modal" data-target="#localstorage_help_modal"><i class="glyphicon glyphicon-info-sign"></i></a><!-- TODO Add accessibility -->
            </h3>
            <div class="row" v-if="polls.length > 0 || adminPolls.length > 0">
                <div class="pull-right">
                    <button @click="removeAllPolls" class="btn btn-sm btn-danger">{__('FindPolls', 'Remove all polls from this browser')}</button>
                </div>
            </div>
            <div v-if="polls.length > 0">
                <h4>{__('FindPolls', 'Visited polls')}</h4>
                <div class="table-responsive">
                    <table class="table table-hover table-condensed">
                        <thead>
                        <tr>
                            <td>{__('FindPolls', 'Title')}</td>
                            <td>{__('FindPolls', 'Address')}</td>
                            <td>{__('FindPolls', 'Last access date')}</td>
                            <td>{__('FindPolls', 'Remove poll from index')}</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="poll in polls">
                            <td>%% poll.title %%</td>
                            <td><a :href="poll.url">%% poll.url %%</a></td>
                            <td>%% poll.accessed | date %%</td>
                            <td><button class="btn btn-sm btn-danger" @click="removePoll(poll.url)"><i class="glyphicon glyphicon-trash"></i><span class="sr-only">{__('Generic', 'Remove')}</span></button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div v-if="adminPolls.length > 0">
                <h4>{__('FindPolls', 'Created polls')}</h4>
                <div class="table-responsive">
                    <table class="table table-hover table-condensed">
                        <thead>
                        <tr>
                            <td>{__('FindPolls', 'Title')}</td>
                            <td>{__('FindPolls', 'Address')}</td>
                            <td>{__('FindPolls', 'Last access date')}</td>
                            <td>{__('FindPolls', 'Remove poll from index')}</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="poll in adminPolls">
                            <td>%% poll.title %%</td>
                            <td><a :href="poll.url">%% poll.url %%</a></td>
                            <td>%% poll.accessed | date %%</td>
                            <td><button class="btn btn-sm btn-danger" @click="removeAdminPoll(poll.url)"><i class="glyphicon glyphicon-trash"></i><span class="sr-only">{__('Generic', 'Remove')}</span></button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div v-if="polls.length === 0 && adminPolls.length === 0" class="alert alert-info">
                {__('FindPolls', 'There are no polls saved inside your browser yet')}
            </div>
        </div>
    </script>
    <div id="local-polls">
    </div>
    <div>
        <h3>{__('FindPolls', 'Send my polls by email')}</h3>
        {if !empty($message)}
            <div class="alert alert-dismissible alert-{$message->type|html}" role="alert">{$message->message|html}{if $message->link != null}<br/><a href="{$message->link}">{$message->link}</a>{/if}<button type="button" class="close" data-dismiss="alert" aria-label="{__('Generic', 'Close')}"><span aria-hidden="true">&times;</span></button></div>
        {/if}
        <form action="" method="post">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <div class="form-group">
                        <div class="input-group">
                            <label for="mail" class="input-group-addon">{__('Generic', 'Your email address')}</label>
                            <input type="email" class="form-control" id="mail" name="mail" autofocus>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-md-offset-3 text-center">
                    <button type="submit" class="btn btn-success">{__('FindPolls', 'Send me my polls')}</button>
                </div>
            </div>
        </form>
    </div>
    <div id="localstorage_help_modal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">{__('FindPolls', 'Polls saved inside this browser')}</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <p>{__('FindPolls', 'Local Storage Help')}</p>
                        <ul>
                            <li>{__('FindPolls', 'Local Storage Help Information Title')}</li>
                            <li>{__('FindPolls', 'Local Storage Help Information Address')}</li>
                            <li>{__('FindPolls', 'Local Storage Help Information Accessed')}</li>
                        </ul>
                        <p>{__('FindPolls', 'Local Storage Help Delete')}</p>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        moment.locale('{$locale}');

        var app = new Vue({
            delimiters: ['%%', '%%'],
            el: '#local-polls',
            template: '#poll-finder-component',
            data() {
                return {
                    polls: [],
                    adminPolls: [],
                };
            },
            created() {
                var polls = localStorage.getItem('polls');
                if (polls === null) {
                    this.polls = [];
                } else {
                    this.polls = JSON.parse(polls);
                }
                var adminPolls = localStorage.getItem('admin_polls');
                if (adminPolls === null) {
                    this.adminPolls = [];
                } else {
                    this.adminPolls = JSON.parse(adminPolls);
                }
            },
            filters: {
                date: function(value) {
                    return moment(value).format('LLLL');
                }
            },
            methods: {
                removePoll(pollKey) {
                    var index = this.polls.findIndex(function (existingPoll) {
                        return existingPoll.url === pollKey;
                    });
                    if (index === -1) {
                        console.error('Oh no, the poll doesn\'t exist !');
                    } else { // if the poll is already present, we need to update the last access date
                        this.polls.splice(index, 1);
                        localStorage.setItem('polls', JSON.stringify(this.polls));
                    }
                },
                removeAdminPoll(pollKey) {
                    var index = this.adminPolls.findIndex(function (existingPoll) {
                        return existingPoll.url === pollKey;
                    });
                    if (index === -1) {
                        console.error('Oh no, the admin poll doesn\'t exist !');
                    } else { // if the poll is already present, we need to update the last access date
                        this.adminPolls.splice(index, 1);
                        localStorage.setItem('admin_polls', JSON.stringify(this.adminPolls));
                    }
                },
                removeAllPolls() {
                    this.polls.splice(0, this.polls.length);
                    this.adminPolls.splice(0, this.adminPolls.length);
                    localStorage.setItem('admin_polls', JSON.stringify(this.adminPolls));
                    localStorage.setItem('polls', JSON.stringify(this.polls));
                }
            }
        });
    </script>
{/block}