<div>
    <h3 style="padding:5px 10px 10px 10px; margin:0px; text-align:right; border-bottom:1px solid #ddd; max-width:240px; margin:0px 0px 20px auto; font-weight:normal;"><?php _e('Emoticons', 'wpdiscuz_sm'); ?></h3>
    <table class="wp-list-table widefat plugins" style="margin-top:10px; border:none;">
        <tbody>
            <tr valign="top">
                <th scope="row" style="width:60%;">
                   <?php _e('Emoticon dialog', 'wpdiscuz_sm'); ?></label>
                </th>
                <td>
                    <input type="radio" name="smile_container" <?php checked($this->options['smile_container'] == 1); ?> value="1" id="smile_container_tooltip"/> <label for="smile_container_tooltip"><?php _e('Tooltip', 'wpdiscuz_sm'); ?></label><br>  
                    <input type="radio" name="smile_container" <?php checked($this->options['smile_container'] == 2); ?> value="2" id="smile_container_default"/> <label for="smile_container_default"><?php _e('Default', 'wpdiscuz_sm'); ?></label>  
                </td>
            </tr>
            <tr valign="top">
                <th scope="row" style="width:60%;">
                    <label for="wpdiscuz_replace_post_smile"><?php _e('Replace Post Smile', 'wpdiscuz_sm'); ?></label>
                    <p style="font-size:13px; color:#999999; width:80%; padding-left:0px; margin-left:0px;"><?php _e('Enable this option if you want to replace default WordPress emoticons in post/page content.', 'wpdiscuz_sm'); ?></p>
                </th>
                <td>
                    <input type="checkbox" name="wpdiscuz_replace_post_smile" <?php checked($this->options['post_smiles'] == 1); ?> value="1" id="wpdiscuz_replace_post_smile"/>  
                </td>
            </tr>
            <tr valign="top">
                <th scope="row">
                    <label for="wpdiscuz_smile_size"><?php _e('Emoticon Size', 'wpdiscuz_sm'); ?></label>
                </th>
                <td>
                    <input id="wpdiscuz_smile_size"  type="number" name="wpdiscuz_smile_size" value="<?php echo $this->options['size']?>"/> px
                </td>
            </tr>
            <tr valign="top">
                <?php if ($this->packs && is_array($this->packs)) : ?>
                    <th scope="row">
                        <label><?php _e('Emoticon Packages', 'wpdiscuz_sm'); ?></label>
                    </th>
                    <td>
                        <input type="radio" name="wpdiscuz_smile_theme" <?php checked($this->options['theme'] == 'default') ?> value="default" id="wpdiscuz_smile_theme_default"/>  
                        <label for="wpdiscuz_smile_theme_default"><img width="20px" height="20px" alt="Default" src="<?php echo plugins_url('/emoticons/icon.png', __FILE__); ?>"></label>
                        <?php foreach ($this->packs as $pack) { ?>
                            <input type="radio" name="wpdiscuz_smile_theme" <?php checked($this->options['theme'] == $pack) ?> value="<?php echo $pack; ?>" id="wpdiscuz_smile_theme_<?php echo $pack; ?>"/>
                            <label for="wpdiscuz_smile_theme_<?php echo $pack; ?>"><img width="20px" height="20px" alt="<?php echo $pack; ?>" src="<?php echo WP_CONTENT_URL . '/wpdiscuz/emoticons/' . $pack . '/icon.png'; ?>"></label>
                        <?php } ?>
                    </td>
                <?php else: ?>
                    <td scope="row" colspan="2">
                        <label><?php _e('Emoticon Packages', 'wpdiscuz_sm'); ?></label>
                        <div style="padding-top:5px; color:#888888;">
                            <div class="wpdiscuz-more">
                                wpDiscuz Emoticons Addon allows you to add new emoticons packages and switch to any package you want.<br />
                                To create a new Smiles package, please follow this instruction: <span class="show-smile-instruction">Show more ... </span>
                                <div id="custom-smile-instruction" class="custom-smile-instruction" style="display: none;">
                                    <strong>1.</strong>&nbsp; Create "wpdiscuz" folder in WordPress <span class="wpddir">/wp-content/</span> directory<br />
                                    <strong>2.</strong>&nbsp; Create "emoticons" folder in WordPress <span class="wpddir">/wp-content/wpdiscuz/</span> directory<br />
                                    <strong>3.</strong>&nbsp; Choose a unique name for your new package and create a folder using this name in <span class="wpddir">/wp-content/wpdiscuz/emoticons/</span> directory. <br />
                                    For example "mysmiles", the end directory will be <span class="wpddir">/wp-content/wpdiscuz/emoticons/mysmiles/</span><br />
                                    <strong>4.</strong>&nbsp; Copy all files from <span class="wpddir">/wp-content/plugins/wpdiscuz-emoticons/emoticons/</span> directory to <span class="wpddir">/wp-content/wpdiscuz/emoticons/mysmiles/</span><br />
                                    <strong>5.</strong>&nbsp; Change the new package demonstration icon <span class="wpddir">mysmiles/icon.png</span>, but do not rename it.<br />
                                    <strong>6.</strong>&nbsp; Delete all images in <span class="wpddir">mysmiles<strong>/</strong>img/</span> folder and upload your new emoticons images.<br />
                                    <strong>7.</strong>&nbsp; Open <span class="wpddir">mysmiles<strong>/</strong>wpsmiliestrans.php</span> file and change new image names for according emoticons' code.<br />
                                    <strong>8.</strong>&nbsp; Then come back to this page and find the emoticons package switcher.<span class="hide-smile-instruction">Show less</span>
                                </div>
                            </div>
                        </div>
                    </td>
                <?php endif; ?>
            </tr>
            <tr valign="top">
                <td scope="row" colspan="2">
                    <label style="display:block; padding-bottom:0px;"><?php _e('Emoticon enable/disable', 'wpdiscuz_sm'); ?></label>
                    <p style="font-size:13px; color:#999999; width:80%; padding-left:0px; margin-left:0px;"><?php _e('Click on emoticons to disable. It may take 1-2 seconds to become grey/inactive.', 'wpdiscuz_sm'); ?></p>
                    <div>
                        <?php
                        foreach ($this->wpsmiliestrans as $code => $imageData) {
                            $class = in_array($code, $this->options['desabled_smiles']) ? 'disabled' : '';
                            $eCode = trim($code,':');
                            $title = trim($imageData['title']);
                            $url = $this->detectUrl($imageData['file']);
                            echo "<img src='$url' alt='$title' title='$title'  data-emoticon-code='$eCode' class='wpdiscuz-option-smile $class' />";
                        }
                        ?>
                    </div>
                </td>
            </tr>
            <tr valign="top">
                <td scope="row" colspan="2">
                    <label style="display:block; padding-bottom:10px;"><?php _e('Custom emoticons', 'wpdiscuz_sm'); ?></label>
                    <div id="custom-smiles">
                        <?php
                        foreach ($this->options['custom_smiles'] as $code => $imageData) {
                            $id = uniqid();
                            ?>
                            <div id="custom_smile_container_<?php echo $id; ?>" class="custom-smile">
                                <code><?php echo $code; ?></code>
                                <img align="absmiddle" id="smile_<?php echo $id; ?>" src="<?php echo $imageData['file']; ?>" alt='<?php echo $imageData['title']; ?>' title='<?php echo $imageData['title']; ?>'  data-emoticon-code="<?php echo trim($code,':'); ?>" />
                                <span id="<?php echo $id; ?>" class="button delete-custom-smile"><?php _e('Delete', 'wpdiscuz_sm'); ?></span>
                            </div>
                            <?php
                        }
                        ?>
                        <div class="add-custom-smile">
                            <table width="100%">
                                <tr>
                                    <td style="padding-top:5px; width:7%;"><label for="custom-smile-code"><?php _e('Code', 'wpdiscuz_sm'); ?></label></td>
                                    <td class="sprefix">:</td>
                                    <td style="width:10%;padding:0px 1px;"><input type="text" name="custom-smile-code" valu="" id="custom-smile-code" placeholder="shock" style="margin:1px;padding:3px 5px; width:100%;"/></td>
                                    <td class="sprefix">:</td>
                                    <td style="padding:5px 10px 0px 20px; width:12%;"><label for="custom-smile-url" style="white-space:nowrap;"><?php _e('Emoticon Image URL', 'wpdiscuz_sm'); ?>:</label></td>
                                    <td style="width:30%;"><input type="text" name="custom-smile-url" valu="" id="custom-smile-url" placeholder="http://example.com/shock.png" style="margin:1px;padding:3px 5px; width:100%;"/></td>
                                    <td style="padding-left:15px;"><span id="custom-smile-button" class="button"><?php _e('Add', 'wpdiscuz_sm'); ?></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            <?php if($this->options['smile_container'] == 1):?>
            <tr>
                <th colspan="2"><h3><?php _e('Styles', 'wpdiscuz_sm'); ?></h3></th>
            </tr>
            <tr>
                <th>
                    <span class="wpdiscuz_smile_dialog_bg"><?php _e('Dialog bacground color', 'wpdiscuz_sm'); ?></span>
                </th>
                <td>
                    <?php $dialogBg = isset($this->options['dialog_background']) ? $this->options['dialog_background'] : '#4C4C4C';?>
                    <input type="text" class="wpdiscuz-color-picker regular-text" value="<?php echo $dialogBg; ?>" id="wpdiscuz_smile_dialog_bg" name="wpdiscuz_smile_dialog_bg" placeholder="<?php _e('Example: #00FF00', 'wpdiscuz_sm'); ?>" style="padding: 5px"/>                    
                </td>
            </tr>
            <tr>
                <th>
                    <span class="wpdiscuz_smile_dialog_border_color"><?php _e('Dialog border color', 'wpdiscuz_sm'); ?></span>
                </th>
                <td>
                    <?php $dialogBorderBg = isset($this->options['dialog_border_color']) ? $this->options['dialog_border_color'] : '#000000';?>
                    <input type="text" class="wpdiscuz-color-picker regular-text" value="<?php echo $dialogBorderBg; ?>" id="wpdiscuz_smile_dialog_border_color" name="wpdiscuz_smile_dialog_border_color" placeholder="<?php _e('Example: #00FF00', 'wpdiscuz_sm'); ?>" style="padding: 5px"/>                    
                </td>
            </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>