<table class="form-table">
  <tr valign="middle">
      <td colspan="2">
        <div class="smpush-sample_notification" style="margin: auto">
          <img src="<?php echo self::$apisetting['desktop_deficon'] ?>" class="smpush-sample_notification_logo">
          <button type="button" class="smpush-close" aria-label="Close"><span aria-hidden="true">×</span></button>
          <div class="smpush-sample_notification_title"><?php echo esc_html__('Notification Title', 'smio-push-notification')?></div>
          <div class="smpush-sample_notification_message"><?php echo esc_html__('This is the Notification Message', 'smio-push-notification')?></div>
          <div class="smpush-sample_notification_url"><?php echo esc_url($_SERVER['HTTP_HOST'])?></div>
        </div>
      </td>
   </tr>
  <tr valign="middle">
      <td class="first"><?php echo esc_html__('Title', 'smio-push-notification')?></td>
      <td>
         <input name="desktop_title" class="smpush_emoji" type="text" size="50" value="<?php echo self::loadData('options','desktop_title')?>" onkeyup="jQuery('.smpush-sample_notification_title').html(smpushProcessSmilies(this.value))" />
      </td>
   </tr>
   <tr valign="top">
      <td class="first"><?php echo esc_html__('Message', 'smio-push-notification')?></td>
      <td>
         <textarea name="message" cols="40" rows="10" id="smpush-message" onkeyup="jQuery('.smpush-sample_notification_message').html(smpushProcessSmilies(this.value))" class="smpush_emoji large-text"><?php echo self::loadData('message')?></textarea>
         <p class="description"><?php echo esc_html__('Reference for unicode smileys codes', 'smio-push-notification')?> <a href="http://apps.timwhitlock.info/emoji/tables/unicode" target="_blank"><?php echo esc_html__('click here', 'smio-push-notification')?></a></p>
      </td>
   </tr>
   <tr valign="middle">
      <td class="first"><?php echo esc_html__('Icon', 'smio-push-notification')?></td>
      <td>
         <input class="smpush_upload_field_deskicon" type="url" size="60" name="desktop_icon" value="<?php echo self::loadData('options','desktop_icon'); ?>" onchange="jQuery('.smpush-sample_notification_logo').attr('src',this.value)" />
          <input class="smpush_upload_file_btn button action" data-container="smpush_upload_field_deskicon" type="button" value="<?php echo esc_html__('Select File', 'smio-push-notification')?>" />
          <p class="description"><?php echo esc_html__('Choose an icon in a standard size 192x192 px', 'smio-push-notification')?></p>
      </td>
   </tr>
   <tr valign="middle">
      <td class="first"><?php echo esc_html__('Link To Open', 'smio-push-notification')?></td>
      <td>
        <input name="desktop_link" type="url" size="50" value="<?php echo urldecode(self::loadData('options','desktop_link'))?>" />
         <p class="description"><?php echo esc_html__('Open link when user clicks on notification message', 'smio-push-notification')?></p>
         <p class="description"><?php echo esc_html__('Leave it empty to set it as your website link', 'smio-push-notification')?></p>
      </td>
   </tr>
   <tr valign="middle">
      <td class="first"><?php echo esc_html__('Big Image', 'smio-push-notification')?></td>
      <td>
         <input class="smpush_upload_field_bigimage" type="url" size="60" name="desktop_bigimage" value="<?php echo self::loadData('options','desktop_bigimage'); ?>" />
          <input class="smpush_upload_file_btn button action" data-container="smpush_upload_field_bigimage" type="button" value="<?php echo esc_html__('Select File', 'smio-push-notification')?>" />
          <p class="description"><?php echo esc_html__('Big image appears under message content. Recommended size 300x200 px', 'smio-push-notification')?></p>
      </td>
   </tr>
   <tr valign="middle">
      <td class="first"><?php echo esc_html__('Badge', 'smio-push-notification')?></td>
      <td>
         <input class="smpush_upload_field_deskbadge" type="url" size="60" name="desktop_badge" value="<?php echo self::loadData('options','desktop_badge'); ?>" />
          <input class="smpush_upload_file_btn button action" data-container="smpush_upload_field_deskbadge" type="button" value="<?php echo esc_html__('Select File', 'smio-push-notification')?>" />
          <p class="description"><?php echo esc_html__('Badge icon for mobile only. Recommended size 24x24 px', 'smio-push-notification')?></p>
      </td>
   </tr>
   <tr valign="middle">
      <td class="first"><?php echo esc_html__('Sound URL', 'smio-push-notification')?></td>
      <td>
         <input class="smpush_upload_field_desksound" type="url" size="60" name="desktop_sound" value="<?php echo self::loadData('options','desktop_sound'); ?>" />
          <input class="smpush_upload_file_btn button action" data-container="smpush_upload_field_desksound" type="button" value="<?php echo esc_html__('Select File', 'smio-push-notification')?>" />
          <p class="description"><?php echo esc_html__('Play sound file when notification arrived for mobiles only', 'smio-push-notification')?></p>
      </td>
   </tr>
    <tr valign="middle">
      <td class="first"><?php echo esc_html__('Duration', 'smio-push-notification')?></td>
    <td>
      <select name="desktop_interaction">
        <option value="true" <?php if(self::loadData('options','desktop_interaction') == "true"): ?>selected="selected"<?php endif;?>><?php echo esc_html__('Open until interaction', 'smio-push-notification')?></option>
        <option value="false" <?php if(self::loadData('options','desktop_interaction') == "false"): ?>selected="selected"<?php endif;?>><?php echo esc_html__('20 Seconds', 'smio-push-notification')?></option>
      </select>
    </td>
    </tr>
    <tr valign="middle">
      <td class="first"><?php echo esc_html__('Vibrate', 'smio-push-notification')?></td>
    <td>
      <input name="desktop_vibrate" value="<?php echo self::loadData('options','desktop_vibrate'); ?>" type="text" size="50" placeholder="100.200.100.300.200" />
      <p class="description"><?php echo esc_html__('Make mobile vibrates when message arrives with different power', 'smio-push-notification')?></p>
    </td></tr>
    <tr valign="middle"><td class="first"><?php echo esc_html__('Silent', 'smio-push-notification')?></td>
      <td>
        <label><input name="desktop_silent" <?php if(self::loadData('options','desktop_silent') == 1): ?>checked="checked"<?php endif;?> type="checkbox" /> <?php echo esc_html__('Message arrives silently in mobile', 'smio-push-notification')?></label>
    </td>
    </tr>
    <tr valign="middle"><td class="first"><?php echo esc_html__('Direction', 'smio-push-notification')?></td>
      <td>
        <select name="desktop_dir">
          <option value="auto"><?php echo esc_html__('Auto', 'smio-push-notification')?></option>
          <option value="rtl" <?php if(self::loadData('options','desktop_dir') == "rtl"): ?>selected="selected"<?php endif;?>><?php echo esc_html__('RTL', 'smio-push-notification')?></option>
          <option value="ltr" <?php if(self::loadData('options','desktop_dir') == "ltr"): ?>selected="selected"<?php endif;?>><?php echo esc_html__('LTR', 'smio-push-notification')?></option>
        </select>
      </td>
    </tr>
    <tr valign="middle"><td class="first"><?php echo esc_html__('Chrome Actions', 'smio-push-notification')?></td>
      <td>
        <div class="smpushChromeActions">
          <?php
          $desktop_actions = self::loadData('options','desktop_actions');
          if(empty($desktop_actions)){
            $desktop_actions = array('id' => array(0 => ''), 'text' => array(0 => ''), 'icon' => array(0 => ''), 'link' => array(0 => ''));
          }
          for($i=0;$i<count($desktop_actions['id']);$i++):
          ?>
          <div class="smpushlinebetween">
            <input value="<?php echo esc_attr($i);?>" type="hidden" class="actionsLoop" />
            <input name="desktop_actions[id][<?php echo esc_attr($i);?>]" value="<?php echo esc_attr($desktop_actions['id'][$i]);?>" onkeyup="smpushremoveNonAlpha(this)"  onchange="smpushremoveNonAlpha(this)" type="text" size="8" placeholder="<?php echo esc_html__('Action ID', 'smio-push-notification')?>">
            <input name="desktop_actions[text][<?php echo esc_attr($i);?>]" value="<?php echo esc_attr($desktop_actions['text'][$i]);?>" type="text" size="15" placeholder="<?php echo esc_html__('Button Text', 'smio-push-notification')?>">
            <input class="smpush_upload_field_action<?php echo esc_attr($i);?>" name="desktop_actions[icon][<?php echo esc_attr($i);?>]" value="<?php echo esc_attr($desktop_actions['icon'][$i]);?>" type="url" size="25" placeholder="<?php echo esc_html__('Icon URL', 'smio-push-notification')?>">
            <input class="smpush_upload_file_btn button action" data-container="smpush_upload_field_action<?php echo esc_attr($i);?>" type="button" value="<?php echo esc_html__('Select File', 'smio-push-notification')?>" />
            <br />
            <input name="desktop_actions[link][<?php echo esc_attr($i);?>]" value="<?php echo esc_attr($desktop_actions['link'][$i]);?>" type="url" size="50" placeholder="<?php echo esc_html__('Open Link', 'smio-push-notification')?>">
            <button type="button" class="button" onclick="smpushActionAddRow(this)"><?php echo esc_html__('Add', 'smio-push-notification')?></button>
            <button type="button" class="button" onclick="smpushActionDelRow(this)"><?php echo esc_html__('Remove', 'smio-push-notification')?></button>
          </div>
          <?php endfor;?>
        </div>
      </td>
    </tr>
  <tr valign="middle">
    <td class="first"><?php echo esc_html__('UTM Parameters', 'smio-push-notification')?></td>
    <td>
      <input name="desktop_utm_source" value="<?php echo self::loadData('options','desktop_utm_source');?>" type="text" size="30" placeholder="<?php echo esc_html__('Source', 'smio-push-notification')?>"><br />
      <input name="desktop_utm_medium" value="<?php echo self::loadData('options','desktop_utm_medium');?>" type="text" size="30" placeholder="<?php echo esc_html__('Medium', 'smio-push-notification')?>"><br />
      <input name="desktop_utm_campaign" value="<?php echo self::loadData('options','desktop_utm_campaign');?>" type="text" size="30" placeholder="<?php echo esc_html__('Campaign', 'smio-push-notification')?>">
    </td>
  </tr>
</table>
