{% extends 'base.html.twig' %}
{% trans_default_domain 'fediplan' %}
{% block title %}{{ 'common.schedule'|trans }}{% endblock %}

{% block content %}
    {% include 'nav.html.twig' %}
    <h1>Schedule</h1>

    {% for type, messages in app.session.flashbag.all() %}
        {% for message in messages %}
            {% if type == 'Error' %}
                <div class="row">
                    <div class="alert alert-danger col-md-6" style="text-align: center">
                        {{ message }}
                    </div>
                </div>
            {% else %}
                <div class="row">
                    <div class="alert alert-success col-md-6" style="text-align: center">
                        {{ message }}
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    {% endfor %}


    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-horizontal" style=" display: flex;flex: 1 1 auto;">
                    <div class="img-square-wrapper">
                        <img class="" width="100" src="{{ app.user.avatar }}" >
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">{{ convertAccountEmoji(app.user, app.user.displayName) | raw }}</h4>
                        <p class="card-text">@{{ app.user.acct }}</p>
                    </div>
                </div>
                <div class="card-footer">
                    <small class="text-muted">{{ app.user.note }}</small>
                </div>
            </div>
        </div>
    </div>
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12">
            <div class="row">
                <div class=" col-md-6">
                    <div class="form-group has-feedback">
                        {{ form_label(form.content_warning) }}
                        {{ form_widget(form.content_warning, {'attr': {'class': 'form-control'}}) }}
                        {% if not form.content_warning.vars.errors is empty %}
                            <span class="label label-danger">
                                {% for errorItem in form.content_warning.vars.errors %}
                                    {{ errorItem.message }}
                                {% endfor %}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class=" col-md-6">
                    <div class="form-group has-feedback">
                        {{ form_label(form.content) }}
                        {{ form_widget(form.content, {'attr': {'class': 'form-control','id':'composer_content'}}) }}
                        {% if not form.content.vars.errors is empty %}
                            <span class="label label-danger">
                                {% for errorItem in form.content.vars.errors %}
                                    {{ errorItem.message }}
                                {% endfor %}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class=" col-md-6">
                    <div class="form-group has-feedback">
                        {{ 'common.counter'|trans }}: <span id="count">0</span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class=" col-md-3">
                    <div class="form-group has-feedback">
                        {{ form_label(form.visibility) }}
                        {{ form_widget(form.visibility, {'attr': {'class': 'form-control'}}) }}
                        {% if not form.visibility.vars.errors is empty %}
                            <span class="label label-danger">
                                            {% for errorItem in form.visibility.vars.errors %}
                                                {{ errorItem.message }}
                                            {% endfor %}
                                        </span>
                        {% endif %}
                    </div>
                </div>
            </div>


            <div class="row">
                <div class=" col-md-3">
                    <div class="form-group has-feedback">
                        {{ form_label(form.sensitive) }}
                        {{ form_widget(form.sensitive) }}
                        {% if not form.sensitive.vars.errors is empty %}
                            <span class="label label-danger">
                                            {% for errorItem in form.sensitive.vars.errors %}
                                                {{ errorItem.message }}
                                            {% endfor %}
                                        </span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class=" col-md-4">
                    <div class="form-group has-feedback">
                        {{ form_label(form.scheduled_at) }}
                        {{ form_widget(form.scheduled_at, {'attr': {'class': 'form-control'}}) }}
                        {% if not form.scheduled_at.vars.errors is empty %}
                            <span class="label label-danger">
                                            {% for errorItem in form.scheduled_at.vars.errors %}
                                                {{ errorItem.message }}
                                            {% endfor %}
                                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class=" col-md-4">
                    <div class="form-group has-feedback">
                        {{ form_label(form.timeZone) }}
                        {{ form_widget(form.timeZone, {'attr': {'class': 'form-control'}}) }}
                        {% if not form.timeZone.vars.errors is empty %}
                            <span class="label label-danger">
                                            {% for errorItem in form.timeZone.vars.errors %}
                                                {{ errorItem.message }}
                                            {% endfor %}
                                        </span>
                        {% endif %}
                    </div>
                </div>
                <div class=" col-md-3"></div>
            </div>
        </div>


        <div class="container" style="margin-bottom: 30px;" id="media_container"></div>
    </div>
    {{ form_end(form) }}
    <div class="row" style="margin-top: 20px;">
        <div class="container">
            <!-- The file upload form used as target for the file upload widget -->
            <form
                    id="fileupload"
                    action="https://{{ instance }}/api/v1/media"
                    method="POST"
                    enctype="multipart/form-data"
            >
                <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                <div class="row fileupload-buttonbar">
                    <div class="col-lg-7">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success fileinput-button">
              <i class="glyphicon glyphicon-plus"></i>
              <span>{{ 'page.schedule.form.add_files'|trans }}</span>
              <input type="file" name="file"  />
            </span>
                        <button type="submit" class="btn btn-primary start">
                            <i class="glyphicon glyphicon-upload"></i>
                            <span>{{ 'common.start_upload'|trans }}</span>
                        </button>
                        <!-- The global file processing state -->
                        <span class="fileupload-process"></span>
                    </div>
                    <!-- The global progress state -->
                    <div class="col-lg-5 fileupload-progress fade">
                        <!-- The global progress bar -->
                        <div
                                class="progress progress-striped active"
                                role="progressbar"
                                aria-valuemin="0"
                                aria-valuemax="100"
                        >
                            <div
                                    class="progress-bar progress-bar-success"
                                    style="width:0%;"
                            ></div>
                        </div>
                        <!-- The extended global progress state -->
                        <div class="progress-extended">&nbsp;</div>
                    </div>
                </div>
                <!-- The table listing the files available for upload/download -->
                <table role="presentation" class="table table-striped">
                    <tbody class="files"></tbody>
                </table>
            </form>
        </div>
    </div>

{% endblock %}


{% block stylesheets %}

    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/doka.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/blueimp-gallery.min.css') }}">
    <link rel="stylesheet" href="{{ asset('js/jQuery-File-Upload-10.1.0/css/jquery.fileupload.css') }}">

 {% endblock %}

{% block javascripts %}
    <!-- The blueimp Gallery widget -->
    <div
            id="blueimp-gallery"
            class="blueimp-gallery blueimp-gallery-controls"
            data-filter=":even"
    >
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>

{% verbatim %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
          <tr class="template-upload">
              <td>
                  <span class="preview"></span>
              </td>
              <td>
                  {% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
                      <p class="name">{%=file.name%}</p>
                  {% } %}
                  <strong class="error text-danger"></strong>
              </td>
              <td>
                  <p class="size">Processing...</p>
                  <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
              </td>
              <td>
                  {% if (!o.options.autoUpload && o.options.edit && o.options.loadImageFileTypes.test(file.type)) { %}
                    <button class="btn btn-success edit" data-index="{%=i%}" disabled>
                        <i class="glyphicon glyphicon-edit"></i>
                        <span>Edit</span>
                    </button>
                  {% } %}
                  {% if (!i && !o.options.autoUpload) { %}
                      <button class="btn btn-primary start" disabled>
                          <i class="glyphicon glyphicon-upload"></i>
                          <span>Start</span>
                      </button>
                  {% } %}
              </td>
          </tr>
      {% } %}
    </script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
      {% for (var i=0, file; file=o.files[i]; i++) { %}
          <tr class="template-download">
              <td>
                  <span class="preview">
                      {% if (file.thumbnailUrl) { %}
                          <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                      {% } %}
                  </span>
              </td>
              <td>
                  {% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
                      <p class="name">
                          {% if (file.url) { %}
                              <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                          {% } else { %}
                              <span>{%=file.name%}</span>
                          {% } %}
                      </p>
                  {% } %}
                  {% if (file.error) { %}
                      <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                  {% } %}
              </td>
              <td>
                  <span class="size">{%=o.formatFileSize(file.size)%}</span>
              </td>
              <td>
                  {% if (file.deleteUrl) { %}
                      <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                          <i class="glyphicon glyphicon-trash"></i>
                          <span>Delete</span>
                      </button>
                      <input type="checkbox" name="delete" value="1" class="toggle">
                  {% } else { %}
                      <button class="btn btn-warning cancel">
                          <i class="glyphicon glyphicon-ban-circle"></i>
                          <span>Cancel</span>
                      </button>
                  {% } %}
              </td>
          </tr>
      {% } %}
    </script>
    {% endverbatim %}

    <script src="{{ asset('js/jquery.min.js') }}"></script>

    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/vendor/jquery.ui.widget.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/tmpl.min.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/load-image.all.min.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/canvas-to-blob.min.js') }}"></script>

    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <!-- Doka Image Editor polyfills -->
    <script>
        [
            {
                supported: 'Promise' in window,
                fill:
                    'https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js'
            },
            {
                supported: 'fetch' in window,
                fill: 'https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.min.js'
            },
            {
                supported:
                    'CustomEvent' in window &&
                    'log10' in Math &&
                    'sign' in Math &&
                    'assign' in Object &&
                    'from' in Array &&
                    ['find', 'findIndex', 'includes'].reduce(function(previous, prop) {
                        return prop in Array.prototype ? previous : false;
                    }, true),
                fill: 'js/vendor/doka.polyfill.min.js'
            }
        ].forEach(function(p) {
            if (p.supported) return;
            document.write('<script src="' + p.fill + '"><\/script>');
        });
    </script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/vendor/doka.min.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/vendor/jquery.blueimp-gallery.min.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.iframe-transport.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-process.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-image.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-audio.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-video.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-validate.js') }}"></script>
    <script src="{{ asset('js/jQuery-File-Upload-10.1.0/js/jquery.fileupload-ui.js') }}"></script>
    <script src="{{ asset('js/moment.js') }}"></script>
    <script type="text/javascript">
        $(function() {
            'use strict';

            // Initialize the jQuery File Upload widget:
            $('#fileupload').fileupload({
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},
                doka: Doka.create({ utils: ['crop', 'filter', 'color', 'resize'] }),
                edit:
                    Doka.supported() &&
                    function(file) {
                        return this.doka.edit(file).then(function(output) {
                            return output && output.file;
                        });
                    },
                beforeSend: function ( xhr ) {
                    setHeader(xhr);
                },
                success: function (data) {
                    var message = "{{ 'common.delete'|trans }}";
                    var content;
                    content = ' <div class="row" id="media_container_'+data.id+'">\n' +
                    '                <div class="col-md-4">\n' +
                    '                    <img src="'+data.preview_url+'" style="width:100%;max-width:400px;" id="media_preview_'+data.id+'"/>\n' +
                    '                </div>\n' +
                    '                <div class="col-md-6">\n' +
                    '                    <textarea name="media_description_'+data.id+'" class="form-control"></textarea>\n' +
                    '                </div>\n' +
                    '                <input type="hidden" name="media_id_'+data.id+'" value="'+data.id+'"/>\n' +
                    '                <div class="col-md-2">\n' +
                    '                        <button type="button" class="btn btn-danger delete_media" data-id="'+data.id+'">\n' +
                    '                          <i class="glyphicon glyphicon-trash"></i>\n' +
                    '                          <span>'+message+'</span>\n' +
                    '                      </button>\n' +
                    '                </div>\n' +
                    '            </div>'

                    $('#media_container').html($('#media_container').html() + content);

                },
                url: 'https://{{ instance }}/api/v1/media',
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mp4|mp3)$/i
            });

            // Enable iframe cross-domain access via redirect option:
            $('#fileupload').fileupload(
                'option',
                'redirect',
                window.location.href.replace(/\/[^/]*$/, '/cors/result.html?%s')
            );

            // Load existing files:
            $('#fileupload').addClass('fileupload-processing');
            $.ajax({
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},
                url: $('#fileupload').fileupload('option', 'url'),
                dataType: 'json',
                context: $('#fileupload')[0]
            })
                .always(function() {
                    $(this).removeClass('fileupload-processing');
                })
                .done(function(result) {
                    $(this)
                        .fileupload('option', 'done')
                        // eslint-disable-next-line new-cap
                        .call(this, $.Event('done'), { result: result });
                });
        });
        var setHeader = function (xhr) {
            xhr.setRequestHeader('Authorization', '{{ token }}');
            xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
        };
    </script>

    <script type="text/javascript">
        $("#compose_content").keyup(function(){
            inputText = $(this).val();
            inputText = inputText
                .replace(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g, 'xxxxxxxxxxxxxxxxxxxxxxx')
                .replace(/(^|[^\/\w])@(([a-z0-9_]+)@[a-z0-9\.\-]+[a-z0-9]+)/ig, '$1@$3');
            $("#count").text(inputText.length);
        });

        $(document).ready(function() {
            var timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            $('#compose_timeZone').val(timezone);
            $(document).on('click', '.delete_media', function () {
                var id = $(this).attr('data-id');
                $('#media_container_' + id).remove();
            })
            /*var language = navigator.languages && navigator.languages[0] ||
                navigator.language ||
                navigator.userLanguage;
            var format = 'YYYY/MM/DD HH:mm:ss ZZ';
            moment(time, format).tz(zone).format(format);
            var currentDate = new Date().toLocaleString(language, { timeZone: timezone })*/
        });
    </script>
{% endblock %}
