<div class="instalink-demo">
    <form class="instalink-demo-form">
        <input type="hidden" name="api" value="<?php echo $preferences_custom_api_url; ?>">
        <input class="instalink-demo-result" type="hidden" name="options" value="">
                
        <div class="instalink-demo-accordion">
            <div class="instalink-demo-accordion-item-active instalink-demo-accordion-item">
                <div class="instalink-demo-accordion-item-trigger"><?php _e('Source', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>

                <div class="instalink-demo-accordion-item-content">
                    <div class="instalink-demo-username instalink-demo-field-group">
                        <div class="instalink-demo-field-group-name">
                            <?php _e('Username', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field-group-description">
                            <?php _e('Instagram account (without "@"). Leave blank if you want to display posts by hashtag.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field">
                            <input class="instalink-demo-text-input" type="text" name="username">
                        </div>
                    </div>

                    <div class="instalink-demo-hashtag instalink-demo-field-group">
                        <div class="instalink-demo-field-group-name">
                            <?php _e('Hashtag', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field-group-description">
                            <?php _e('Instagram hashtag (without "#"). If username is specified, posts will be selected by the username and filtered by the specified hashtag. Multiple hashtags separated by comma or space are supported.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field">
                            <input class="instalink-demo-text-input" type="text" name="hashtag">
                        </div>
                    </div>

                    <div class="instalink-demo-field-group">
                        <div class="instalink-demo-cache-media-time instalink-demo-field">
                            <div class="instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Cache media time', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>

                            <span class="instalink-demo-range-container">
                                <input class="instalink-demo-range-input" type="text" name="cacheMediaTime">
                                <span class="instalink-demo-range" data-min="0" data-step="100" data-max="86400"></span>
                            </span>

                            <span class="instalink-demo-field-hint"><?php _e('s', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                        </div>
                    </div>  

                    <div class="instalink-demo-ban instalink-demo-field-group">
                        <div class="instalink-demo-field-group-name">
                            <?php _e('Ban', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field-group-description">
                            <?php _e('List usernames to hide all posts from, separated by comma or space. Works only with hashtag source.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field">
                            <input class="instalink-demo-text-input" type="text" name="ban">
                        </div>
                    </div>
                </div>
            </div>

            <div class="instalink-demo-accordion-item">
                <div class="instalink-demo-accordion-item-trigger"><?php _e('Layout', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>

                <div class="instalink-demo-accordion-item-content">
                    <div class="instalink-demo-field-group">
                        <div class="instalink-demo-image-size instalink-demo-field">
                            <span class="instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Image size', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                            <select class="instalink-demo-select-image-size instalink-demo-select" name="imageSize">
                                <option value="small"><?php _e('Small', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="medium" selected><?php _e('Medium', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="large"><?php _e('Large', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="xlarge"><?php _e('xLarge', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                            </select>
                        </div>
                    </div>

                    <div class="instalink-demo-field-group">
                        <div class="instalink-demo-lang instalink-demo-field">
                            <span class="instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Language', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                            <select class="instalink-demo-select-language instalink-demo-select" name="lang">
                                <option value="en" selected><?php _e('English', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="id"><?php _e('Bahasa Indonesia', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="de"><?php _e('Deutsch', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="es"><?php _e('Espa&ntilde;ol', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="fr"><?php _e('Fran&ccedil;ais', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="it"><?php _e('Italiano', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="nl"><?php _e('Nederlands', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="pl"><?php _e('Polski', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="pt-BR"><?php _e('Portugu&ecirc;s', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="ru"><?php _e('&#x0420;&#x0443;&#x0441;&#x0441;&#x043a;&#x0438;&#x0439;', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="sv"><?php _e('Svenska', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="tr"><?php _e('T&uuml;rk&ccedil;e', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="zh-HK"><?php _e('&#x4e2d;&#x6587;', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="ja"><?php _e('&#x65e5;&#x672c;&#x8a9e;', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="ko"><?php _e('&#xd55c;&#xad6d;&#xc758;', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                                <option value="he"><?php _e('&#x5E2;&#x5B4;&#x5D1;&#x5B0;&#x5E8;&#x5B4;&#x5D9;&#x5EA;', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></option>
                            </select>
                        </div>
                    </div>

                    <div class="instalink-demo-field-group">
                        <div class="instalink-demo-field-group-name">
                            <?php _e('Widget size', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                        </div>

                        <div class="instalink-demo-field">
                            <label class="instalink-demo-width">
                                <span class="instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Width', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                                <span class="instalink-demo-range-container">
                                    <input type="hidden" name="width" value="auto">
                                    <input class="instalink-demo-range-input" type="text" name="width">
                                    <span class="instalink-demo-range" data-min="100" data-step="10" data-max="2580"></span>
                                </span>
                            </label>

                            <label class="instalink-demo-width-auto">
                                <input class="instalink-demo-checkbox" type="checkbox" name="width_auto" value="true">
                                <span class="instalink-demo-checkbox-label"><?php _e('Responsive', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                            </label>
                        </div>

                        <div class="instalink-demo-field">
                            <label class="instalink-demo-height">
                                <span class="instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Height', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                                <span class="instalink-demo-range-container">
                                    <input type="hidden" name="height" value="auto">
                                    <input class="instalink-demo-range-input" type="text" name="height">
                                    <span class="instalink-demo-range" data-min="100" data-step="10" data-max="2000"></span>
                                </span>
                            </label>
                        </div>
                    </div>

                    <div class="instalink-demo-show-heading instalink-demo-field-group">
                        <label>
                            <input type="hidden" name="showHeading" value="false">
                            <input class="instalink-demo-checkbox" type="checkbox" name="showHeading" value="true">
                            <span class="instalink-demo-checkbox-label"><?php _e('Show heading', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                            <span class="instalink-demo-tooltip">
                                <span class="instalink-demo-tooltip-trigger">?</span>

                                <span class="instalink-demo-tooltip-content">
                                    <span class="instalink-demo-tooltip-content-inner">
                                        <?php _e('Show or hide the heading panel with username, profile icon, counters and follow button.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                                    </span>
                                </span>
                            </span>
                        </label>
                    </div>

                    <div class="instalink-demo-scroll instalink-demo-field-group">
                        <label>
                            <input type="hidden" name="scroll" value="false">
                            <input class="instalink-demo-checkbox" type="checkbox" name="scroll" value="true">
                            <span class="instalink-demo-checkbox-label"><?php _e('Scroll', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>

                            <span class="instalink-demo-tooltip">
                                <span class="instalink-demo-tooltip-trigger">?</span>

                                <span class="instalink-demo-tooltip-content">
                                    <span class="instalink-demo-tooltip-content-inner">
                                        <?php _e('Scroll - scrolling down with a mouse wheel allows you to see more images.', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?>
                                    </span>
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="instalink-demo-accordion-item">
                <div class="instalink-demo-accordion-item-trigger"><?php _e('Colors', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></div>

                <div class="instalink-demo-accordion-item-content">
                     <div class="instalink-demo-colors instalink-demo-field-group">
                        <label class="instalink-demo-field">
                            <input class="instalink-demo-colorpicker" type="text" name="bgColor">
                            <span class="instalink-demo-colorpicker-label instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Panel, button color', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                        </label>

                        <label class="instalink-demo-field">
                            <input class="instalink-demo-colorpicker" type="text" name="contentBgColor">
                            <span class="instalink-demo-colorpicker-label instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Content background color', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                        </label>

                        <label class="instalink-demo-field">
                            <input class="instalink-demo-colorpicker" type="text" name="fontColor">
                            <span class="instalink-demo-colorpicker-label instalink-demo-field-name-inline instalink-demo-field-name"><?php _e('Text color', ELFSIGHT_INSTALINK_TEXTDOMAIN); ?></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="instalink-demo-preview-container">
        <div class="instalink-demo-preview"></div>
        <div class="instalink-demo-preview-clone"></div>
    </div>
</div>