<?php  defined('C5_EXECUTE') or die("Access Denied.");

print Core::make('helper/concrete/ui')->tabs(array(
    array('feed-details', t('Feed Details'), true),
    array('feed-settings', t('Feed Settings'))
));

?>

<style>
    .two-columns {
        width: 50%;
        float: left;
    }
    .four-columns {
        width: 24%;
        display: inline-block;
    }
    .pixel-input-width {
        width: 100px;
    }
    .clear-both {
        clear: both;
    }
    .no-float {
        float: none;
    }
    .form-group input.validation-error {
        border: 1px solid red;
    }
    .validation-message {
        margin-top: 30px;
        color: red;
    }
</style>

<div id="validate"></div>

<div id="ccm-tab-content-feed-details" class="ccm-tab-content">

    <!-- Twitter Widget ID -->
    <div class="form-group">
        <?php  echo $form->label('widgetID', t('Twitter Widget ID'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Your widget ID is the data-widget-id=XXXXX found in the embed code.'); ?>"></i>
        <?php  print $form->text('widgetID', $widgetID)?>
    </div>

    <!-- Twitter Feed Title -->
    <div class="form-group">
        <?php  echo $form->label('feedTitle', t('Twitter Feed Title'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('The Twitter Feed Title is optional.'); ?>"></i>
        <?php  print $form->text('feedTitle', $feedTitle)?>
    </div>
    
    <!-- Twitter Feed Link -->
    <div class="form-group">
        <?php  echo $form->label('twitterFeedLink', t('Twitter Feed Link'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('The last part of your Twitter Feed URL (after https://www.twitter.com/)'); ?>"></i>
        <?php  print $form->text('twitterFeedLink', $twitterFeedLink)?>
    </div>
    
    <div class="text-muted"><?php  echo t('For information on getting your widget ID:'); ?><br><a href="<?php  echo t('https://twittercommunity.com/t/how-do-you-get-twitter-widget-id'); ?>" target="_blank"><?php  echo t('https://twittercommunity.com/t/how-do-you-get-twitter-widget-id'); ?></a></div>
    
</div>

<div id="ccm-tab-content-feed-settings" class="ccm-tab-content">

    <!-- Tweets to Display -->
    <div class="form-group two-columns">
        <?php  echo $form->label('maxTweets', t('Tweets to Display'));?>
        <?php  echo $form->select('maxTweets', array('1' => '1', '2' => '2', '3' => '3',
        '4' => '4', '5' => '5', '6' => '6', '7' => '7', '8' => '8', '9' => '9', '10' => '10', '11' => '11',
        '12' => '12', '13' => '13', '14' => '14', '15' => '15', '16' => '16', '17' => '17', '18' => '18',
        '19' => '19', '20' => '20'), $maxTweets, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Show User -->
    <div class="form-group two-columns">
        <?php  echo $form->label('showUser', t('Show User'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Show the user name, Twitter name, and user thumbnail image.'); ?>"></i>
        <?php  echo $form->select('showUser', array('true' => t('on'), 'false' => t('off')), $showUser, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Show Posted Time -->
    <div class="form-group two-columns">
        <?php  echo $form->label('showTime', t('Show Posted Time'));?>
        <?php  echo $form->select('showTime', array('true' => t('on'), 'false' => t('off')), $showTime, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Show User Interaction -->
    <div class="form-group two-columns">
        <?php  echo $form->label('showInteraction', t('Show User Interaction'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Show the Reply, Retweet, and Favorite links.'); ?>"></i>
        <?php  echo $form->select('showInteraction', array('true' => t('on'), 'false' => t('off')), $showInteraction, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Show Retweet -->
    <div class="form-group two-columns">
        <?php  echo $form->label('showRetweet', t('Show Retweets'));?>
        <?php  echo $form->select('showRetweet', array('true' => t('on'), 'false' => t('off')), $showRetweet, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Show Feed Images -->
    <div class="form-group two-columns">
        <?php  echo $form->label('showImages', t('Show Tweet Images'));?>
        <?php  echo $form->select('showImages', array('true' => t('on'), 'false' => t('off')), $showImages, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Enable Links -->
    <div class="form-group two-columns">
        <?php  echo $form->label('enableLinks', t('Enable Links'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Control whether feed text links are plain text or anchor tags. Enable Links set to \'on\' will also abbreviate the time posted and disable the user thumbnail image.'); ?>"></i>
        <?php  echo $form->select('enableLinks', array('true' => t('on'), 'false' => t('off')), $enableLinks, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Open Links in New Window -->
    <div class="form-group two-columns">
        <?php  echo $form->label('linksInNewWindow', t('Open Links in New Window'));?>
        <?php  echo $form->select('linksInNewWindow', array('true' => t('on'), 'false' => t('off')), $linksInNewWindow, array('style' => 'width: 125px;')); ?>
    </div>

    <!-- Tweet Divider 
    <div class="form-group two-columns">
        <?php  echo $form->label('tweetDivider', t('Tweet Divider'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Add a horizontal divider between tweets.'); ?>"></i>
        <?php  echo $form->select('tweetDivider', array('on' => t('on'), 'off' => t('off')), $tweetDivider, array('style' => 'width: 125px;')); ?>
    </div>-->

    <!-- Max Width
    <div class="form-group two-columns clear-both">
        <?php  echo $form->label('maxWidth', t('Max Width'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('When a width is not set, or set to 0, the default max-width will be 520px.'); ?>"></i>
        <div class="input-group pixel-input-width">
        <?php  print $form->text('maxWidth', $maxWidth ? $maxWidth : '0', array('style' => 'text-align: center;', 'maxlength' => '4', 'class' => 'validation'))?><span class="input-group-addon">px</span>
        </div>
    </div> -->

    <!-- Feed Padding 
    <div class="form-group two-columns">
        <?php  echo $form->label('feedPadding', t('Feed Padding'));?>
        <i class="fa fa-question-circle launch-tooltip" title="" data-original-title="<?php  echo t('Add padding to the feed container.'); ?>"></i>
        <div class="input-group pixel-input-width">
        <?php  print $form->text('feedPadding', $feedPadding ? $feedPadding : '0', array('style' => 'text-align: center;', 'maxlength' => '3', 'class' => 'validation'))?><span class="input-group-addon">px</span>
        </div>
    </div>-->

</div>


<script>
$("#ccm-form-submit-button").click(function(event){
    $('.validation').each (function() {
        if (isNaN($(this).val()) || $(this).val() < '0') {
            $(this).addClass('validation-error');
            $('#validate').text('<?php  echo t("Valid input values for Max Width, Feed Padding, and Font Sizes are 0 or positive numbers."); ?>')
                          .addClass('well validation-message');
            event.preventDefault();
        } else {
            $(this).removeClass('validation-error');
        }
    });
});
</script>