<div class="row justify-content-between">
    <div class="p-0 col-md-7 sync_form_wrapper">
        {{#remuiexist}}
            <div class="select_all_wrapper pl-0 mb-2 align-items-center d-none">
                <input type="checkbox" name="select_all" checked> Select all
            </div>
            <div id="ConfigSelector" class="d-none">
                {{#configoptions}}
                    <div class="input-group mb-3 align-items-center d-flex">
                        <input type="checkbox" name="{{key}}" class="configinput" checked> {{name}}
                    </div>
                {{/configoptions}}
            </div>
            <div class="input-group my-3 align-items-center  submittion-progress_wrapper">
                <input type="submit" class="btn btn-primary" id="startSync" value="{{#str}}startsyncbtntext, local_sitesync{{/str}}">

                <div class="progress syncprogresstracker d-none">
                    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <div class="no-connection-overlay {{#connection}}d-none{{/connection}}">
                <div class="no-connection-overlay-content-wrapper">
                    <div class="alert alert-warning  fade show m-0" role="alert">
                        {{#str}}noconnectinwarning, local_sitesync{{/str}}
                    </div>
                </div>
            </div>
        {{/remuiexist}}
        {{^remuiexist}}
            <div class="alert alert-danger  fade show" role="alert">
                {{#str}}remuinotfound, local_sitesync{{/str}}
            </div>
        {{/remuiexist}}
    </div>
    <div class="p-0 col-md-4">

        <div class="input-group" id="secureKeyGroup">
            <div class="w-100 d-flex justify-content-start align-items-center">
                <h4 >{{#str}}secretkey, local_sitesync{{/str}}</h4><span class="fa fa-info-circle ml-2 mb-2" data-toggle="tooltip" title="{{#str}}secretkeyaddinfo, local_sitesync{{/str}}"></span>
            </div>
            <div class="input-group-append">
                <input type="password" class="form-control rounded-0" id="secureKeyInput" {{#publickey}}value="{{publickey}}"{{/publickey}} readonly>

                <svg class="copyicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>
            </div>
            <button class="btn btn-secondary ml-2" type="button" id="generateKey">Generate</button>
        </div>
    </div>
</div>

<div id="Syncform"></div>

{{#js}}
    require(['local_sitesync/sync_form'], function(SyncForm) {
        SyncForm.init();
    });
{{/js}}
