<div class="page-margin">

   <div class="row">

      <div class="col-lg-8">

         <ul class="nav nav-tabs">

            <li class="active">

              <a href="#keys" data-toggle="tab">

                <i class="fa fa-key"></i> 

                <span class="setting-tab-text">App Keys</span>

              </a>

            </li>

            <li>

              <a href="#app-setting" data-toggle="tab">

                <i class="fa fa-cogs"></i>

                <span class="setting-tab-text">App Setting</span>

              </a>

            </li>

         </ul>

         <div class="tab-content" id="tabs">

            <div class="tab-pane active" id="keys">
               
               <div class="tab-container">
                 
                 <div class="form-horizontal">

                 <fieldset>

      <legend>

        <img class="pull-left app-avatar" src="<?php echo $wo['app']['app_avatar']; ?>" alt=""><span id="app-name">	<?php echo $wo['app']['app_name']; ?></span>
        
        <div class="clear"></div>

      </legend>

                 	
                 	 <div class="form-group">

            <label class="col-md-2" for="app_name">App ID</label>  

            <div class="col-md-8">

               <input id="app_name" name="app_name" type="text" class="form-control input-md" disabled value="<?php echo $wo['app']['app_id']; ?>">

               <span class="help-block">Your application ID.</span>

            </div>

         </div>

         <!-- Text input-->
         <div class="form-group">

            <label class="col-md-2" for="app_name">App secret</label>  

            <div class="col-md-8">

               <input id="app_name" name="app_name" type="text" class="form-control input-md" disabled value="<?php echo $wo['app']['app_secret']; ?>">

               <span class="help-block">Your application secret key.</span>

            </div>

         </div>
         
         <div class="form-group">

            <label class="col-md-2" for=""></label>  

            <div class="col-md-8">

               <a href="<?php echo Wo_SeoLink('index.php?tab1=apps');?>" class="btn btn-default"><i class="fa fa-arrow-circle-left"></i> My Apps</a>

            </div>

         </div>

                  
                  </fieldset>
                 </div>
               </div>
              

            </div>

            <div class="tab-pane" id="app-setting">

             <div class="tab-container">
    
    <form class="app-update-form form-horizontal" method="post">

      <fieldset>

      <legend><img class="pull-left app-avatar" src="<?php echo $wo['app']['app_avatar']; ?>" alt=""><span id="app-name"><?php echo $wo['app']['app_name']; ?></span>
        
        <div class="clear"></div></legend>

         <div class="app-update-alert setting-update-alert"></div>


         <!-- Text input-->
         <div class="form-group">

            <label class="col-md-3" for="app_name">App name *</label>  

            <div class="col-md-6">

               <input id="app_name" name="app_name" type="text" class="form-control input-md" value="<?php echo $wo['app']['app_name']; ?>">

               <span class="help-block">Your application name. This is used to attribute the source user-facing authorization screens. 32 characters max.</span>

            </div>

         </div>

         <div class="form-group">

            <label class="col-md-3" for="app_website_url">App website *</label>  

            <div class="col-md-6">

               <input name="app_website_url" id="app_website_url" type="text" class="form-control input-md" value="<?php echo $wo['app']['app_website_url']; ?>">

               <span class="help-block">Your application's publicly accessible home page.</span>

            </div>

         </div>

         <div class="form-group">

            <label class="col-md-3" for="app_description">App description *</label>  

            <div class="col-md-6">

               <textarea name="app_description" id="" rows="3" class="form-control input-md"><?php echo $wo['app']['app_description']; ?></textarea>

               <span class="help-block">Your application description, which will be shown in user-facing authorization screens. Between 10 and 200 characters max.</span>

            </div>

         </div>

         <div class="form-group">

            <label class="col-md-3" for="app_callback_url">App callback url</label>  

            <div class="col-md-6">

               <input name="app_callback_url" id="app_callback_url" type="text" class="form-control input-md" value="<?php echo $wo['app']['app_callback_url']; ?>">

               <span class="help-block">Where should we return after successfully authenticating?</span>

            </div>

         </div>

          <div class="form-group">

            <label class="col-md-3" for="app_avatar">App avatar</label>  

            <div class="col-md-6">

               <input name="app_avatar" id="app_avatar" type="file" class="form-control input-md">              

            </div>

         </div>

          <input name="app_id" id="app_id" type="hidden" value="<?php echo $wo['app']['id']; ?>">  

         <hr>

         <div class="form-group">

            <label class="col-md-3"></label>

            <div class="col-sm-4 text-left">

               <button type="submit" name="save_setting" id="save-setting" tabindex="4" value="Save" class="form-control btn-main-color btn-main">

                <i class="fa fa-repeat progress-icon" data-icon="repeat"></i> Update

               </button>

            </div>

         </div>

      </fieldset>

   </form>

   
    </div>

            </div>

         </div>

      </div>

      <div class="sidebar">

        <?php echo Wo_LoadPage('sidebar/content');?>

      </div>

   </div>

</div>

<script>
$(function() {

  $('form.app-update-form').ajaxForm({

    url: Wo_Ajax_Requests_File() + '?f=apps&s=update_app',
   
    beforeSend: function() {

      Wo_progressIconLoader($('form.app-update-form').find('button'));

    },
   
    success: function(data) {

      scrollToTop();

      if (data.status == 200) {

      	$('[id^=app-name]').text(data.name);

      	$('.app-avatar').attr('src', data.image);

        $('.app-update-alert').html('<div class="alert alert-success">' + data.message + '</div>');

        $('.alert-success').fadeIn('fast', function() {

           $(this).delay(2500).slideUp(500, function() {

              $(this).remove();

            });

        });

      } else {

          var errors = data.errors.join("<br>");

          $('.app-update-alert').html('<div class="alert alert-danger">' + errors + '</div>');

          $('.alert-danger').fadeIn(300);

      }

      Wo_progressIconLoader($('form.app-update-form').find('button'));

    }

  });

});
</script>