<style>
    /* Custom CSS to set text color and background color for disabled input */
    #shortUrlSaved[disabled] {
        color: white;
        background-color: inherit;
    }

    .sms-textbox {
        border: 1px solid #ccc;
        border-radius: 5px;
        font-family: Arial, sans-serif;
        font-size: 12px;
        padding: 8px;
        line-height: 1.5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        height: 135px;
        /* Adjusted height */
        width: 200px;
        /* Adjusted width */
    }

    .sms-textbox::placeholder {
        color: #999;
    }

    .sms-textbox:focus {
        outline: none;
        border-color: #66afe9;
        box-shadow: 0 2px 4px rgba(102, 175, 233, 0.6);
    }

    .sms-textbox:disabled,
    .sms-textbox[readonly] {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .form-control.push_message {
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .tabbable-line>.nav-tabs {
        border: none;
        margin: 0px;
    }

    .tabbable-line>.nav-tabs>li {
        margin-right: 2px;
    }

    .tabbable-line>.nav-tabs>li>a {
        border: 0;
        margin-right: 0;
        color: #737373;
    }

    .tabbable-line>.nav-tabs>li>a>i {
        color: #a6a6a6;
    }

    .tabbable-line>.nav-tabs>li.open,
    .tabbable-line>.nav-tabs>li:hover {
        border-bottom: 4px solid #00ACAC;
    }

    .tabbable-line>.nav-tabs>li.open>a,
    .tabbable-line>.nav-tabs>li:hover>a {
        border: 0;
        background: none !important;
        color: #333333;
    }

    .tabbable-line>.nav-tabs>li.open>a>i,
    .tabbable-line>.nav-tabs>li:hover>a>i {
        color: #a6a6a6;
    }

    .tabbable-line>.nav-tabs>li.open .dropdown-menu,
    .tabbable-line>.nav-tabs>li:hover .dropdown-menu {
        margin-top: 0px;
    }

    .tabbable-line>.nav-tabs>li.active {
        border-bottom: 4px solid #00ACAC;
        position: relative;
    }

    .tabbable-line>.nav-tabs>li.active>a {
        border: 0;
        color: #333333;
    }

    .tabbable-line>.nav-tabs>li.active>a>i {
        color: #404040;
    }

    .tabbable-line>.tab-content {
        margin-top: -3px;
        background-color: #fff;
        border: 0;
        border-top: 1px solid #eee;
        padding: 15px 0;
    }

    .portlet .tabbable-line>.tab-content {
        padding-bottom: 0;
    }

    .nav-tabs {
        background: #fff !important;
        border-top: 1px solid #f0f0f0 !important;
        border-radius: 0px !important;
    }

    .save-v {
        cursor: pointer;
        height: 25px;
        padding: 5px;
    }
</style>

<div ng-hide="textSms">
    <div class="row">

        <div class="col-sm-4 ui-sortable" id="">
            <div id="">
                <div class="phonePreview sms" style="top: 20px; display: block;" id="smsDiv">
                    <div id="smsView" class="dataView">
                        <div class="dataView1">
                            <div class="clearfix"></div>
                            <div class="form-group" ng-hide="">


                                <div style="position: relative; width: 250px; height: 240px;">
                                    <i id="shortlinks-pen" class="fa fa-pencil"
                                        style="position: absolute; top: 6px; right: 6px; cursor: pointer;"
                                        ng-click="openShortUrlModal()"></i>

                                    <textarea ng-model="tobj.smsContent" id="messageContent"
                                        ng-focus="onTextareaFocus()" ng-blur="remainCharacterHide()"
                                        placeholder="Message body" class="form-control push_message_desc sms-textbox"
                                        style="position: absolute; top: 30px; left: 0; width: 240px; height: 220px;"
                                        ng-trim="false" maxlength="240">
                                </textarea>

                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix down-space"></div>

                    </div>
                </div>

            </div>
        </div>

        <!-- sms Setting section -->
        <div class="col-sm-8 ui-sortable">
            <div class="panel-body">
                <div id="divSavedTools" ng-cloak>

                    <!-- <fieldset id="pushTemplate"> -->
                    <legend>SMS Notification Settings</legend>

                    <div class="form-group">
                        <label class="col-md-3 control-label">Select Existing Template</label>
                        <a ng-click="editTemplate('SMS')" class="col-md-1 href="">  <i class=" fa fa-pencil"></i> </a>
                        <div class="col-md-8">
                            <select class="template-select form-control input-sm">
                            </select>
                        </div>
                    </div>

                    <div class="clearfix down-space"></div>

                    <div
                        style="width: 98%; height:12px; border-bottom: 1px solid #e2e7eb; text-align: center; margin-bottom: 10px; margin-left: 2%;">
                        <span style="font-size: 15px; background-color: #F3F5F6; padding: 0 10px;">
                            Create New
                        </span>
                    </div>

                    <div class="clearfix down-space"></div>
                    <div class="clearfix down-space"></div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Template Name</label>
                        <div class="col-md-8">
                            <input type="text" id="templateName" class="form-control" placeholder="Template Name"
                                maxlength="40" ng-model="cTools.template_name">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-4">
                            &nbsp;
                        </div>
                        <div class="col-md-8">
                            <span ng-if="template_name_error" style="color: red">{{template_name_error}}</span>
                        </div>
                    </div>
                    <div class="clearfix down-space"></div>
                    <div class="clearfix down-space"></div>
                    <legend>
                    </legend>

                    <div class="form-group">
                        <label class="col-md-3 control-label"></label>
                        <div class="col-md-9" style="text-align: right;">
                            <button type="button" ng-hide="btnSaveSms" id="btnSaveSms" ng-click="saveMessageTemp()"
                                class="btn btn-sm btn-success">Submit </button>
                            <button type="button" ng-hide="btnUpdateSms" id="btnUpdateSms"
                                ng-click="updateMessageTemp()" class="btn btn-sm btn-success">Update
                            </button>
                            <button type="button" id="btnClose" class="btn btn-sm btn-success"
                                ng-click="closeTemplate(clearTemplateId);">Close</button>

                        </div>

                    </div>

                </div>
            </div>
            <!-- Setting ends here -->
        </div>
    </div>
</div>
</div>

<!-- Modal for SHort URL-->
<div class="modal fade" id="shortUrlField" style="z-index:1050!important;">
    <div class="modal-dialog sms">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Short Urls</h4>
            </div>
            <div class="modal-body">

                <div style="height:250px;overflow:auto">
                    <table class="table">
                        <thead>
                            <th>Urls</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="form-group">
                                        <select class="form-control" ng-model="cshortUrl.selectedShortUrl">
                                            <option value="{{ url.shortUrl }}" ng-repeat="url in shortUrls">{{
                                                url.shortUrl }}</option>
                                        </select>
                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-primary m-r-5" type="button" ng-click="insertShortUrl();"
                    data-dismiss="modal">Save</button>

            </div>
        </div>
    </div>
</div>
<!-- Modal for SHort URL-->