<div class="tab-wrap">
    <div class="tab-label-content" id="tab1-content">
        <label ng-click="tabActive = 1;" class="tab-title">{{ 'general' | translate }}</label>
        <div class="tab-content" ng-class="{'active': tabActive === 1}">
            <div class="group">
                <copy-text text="credential.label"></copy-text>
                <input type="text" ng-model="credential.label" ng-disabled="!canEdit" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'label' | translate}}</label>
            </div>
            <div class="group">
                <copy-text text="credential.username"></copy-text>
                <input type="text" ng-model="credential.username" ng-disabled="!canEdit">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'username' | translate}}</label>
            </div>
            <div class="group">
                <copy-text text="credential.email"></copy-text>
                <input type="text" ng-model="credential.email" ng-disabled="!canEdit">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{ 'email' | translate}}</label>
            </div>
            <div class="group pwField">
                <copy-text text="credential.password"></copy-text>
                <i class="mdi mdi-refresh pointer" ng-click="generatePassword()"></i>
                <i class="pointer mdi" ng-class="{'mdi-eye': !pwFieldShown, 'mdi-eye-off': pwFieldShown}"
                   ng-click="togglePwField()"></i>
                <input type="text" ng-model="credential.password" ng-if="pwFieldShown" ng-disabled="!canEdit">
                <input type="password" ng-model="credential.password" ng-if="!pwFieldShown" ng-disabled="!canEdit">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'password' | translate}}</label>
            </div>
            <div class="group">
                <input type="password" ng-model="credential.password_repeat" ng-disabled="!canEdit">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'password_repeat' | translate}}</label>
            </div>
            <div class="group">
                <copy-text text="credential.description"></copy-text>
                <textarea ng-model="credential.description" ng-disabled="!canEdit"></textarea>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'notes' | translate}}</label>
            </div>
            <div class="group">
                <copy-text text="credential.url"></copy-text>
                <input type="text" ng-model="credential.url" ng-disabled="!canEdit">
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>{{'url' | translate}}</label>
            </div>

            <div ng-show="!canEdit" class="alert alert-info">
              {{ 'edit_insufficient_permissions' | translate }}

            </div>

            <div  style="margin-left: -15px;" ng-include="'save_btn.html'"></div>
        </div>
    </div>


    <div class="tab-label-content" id="tab2-content">
        <label ng-click="tabActive = 2;" class="tab-title">{{ 'custom_fields' | translate }}</label>
        <div class="tab-content"  ng-class="{'active': tabActive === 2}">
            <div class="custom_field" ng-repeat="custom_field in credential.custom_fields" ng-if="custom_field.field_type !== 'file'">
                <div class="field">
                    <div class="group">
                        <input type="text" ng-model="custom_field.label"  ng-disabled="!canEdit">
                        <span class="highlight"></span>
                        <span class="bar"></span>
                    </div>
                </div>
                <div class="field">
                    <div class="group">
                        <i class="mdi mdi-delete"></i>
                        <input type="password" ng-model="custom_field.value" ng-if="custom_field.field_type === 'password'"  ng-disabled="!canEdit">
                        <input type="text" ng-model="custom_field.value" ng-if="custom_field.field_type === 'text'" ng-disabled="!canEdit">
                        <span class="highlight"></span>
                        <span class="bar"></span>
                    </div>
                </div>
            </div>
            <h4 style="margin-left: 5px; margin-bottom: 30px;">{{ 'add_custom_field' | translate }}</h4>
            <div class="col33" style="padding-left: 0">
                <div class="group">
                    <input type="text" ng-model="new_custom_field.label" ng-disabled="!canEdit">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>{{'label' | translate}}</label>
                </div>
            </div>
            <div class="col33">
                <div class="group">
                    <input type="password" ng-model="new_custom_field.value" ng-if="new_custom_field.field_type === 'password'">
                    <input type="text" ng-model="new_custom_field.value" ng-if="new_custom_field.field_type === 'text'" ng-disabled="!canEdit">
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>{{'value' | translate}}</label>
                </div>
            </div>
            <div class="col33">
                <div class="group">
                <select class="input-md" name="type" ng-model="new_custom_field.field_type" ng-disabled="!canEdit">
                    <option value="text">{{ 'text' | translate }}</option>
                    <option value="password">{{ 'password' | translate }}</option>
                </select>
                <span class="highlight"></span>
                <span class="bar"></span>

                </div>
            </div>

            <span><i class="mdi mdi-plus" style="font-size: 30px; padding-top: 10px; display: inline-block; float: left; padding-left: 25px;" ng-click="addCustomField(new_custom_field)"></i></span>

            <div class="clearfix" style="margin-bottom: 30px;"></div>
            <div style="margin-left: -15px;" ng-include="'save_btn.html'"></div>
        </div>
    </div>


    <div class="slide" ng-class="{'right': tabActive === 2}"></div>

</div>
<div class="clearfix"></div>

<script type="text/ng-template" id="save_btn.html">
    <button class="md-btn default" ng-click="saveCredential()" ng-disabled="saving || !canEdit">
        <span>
            <i ng-show="saving"
               ng-class="{'fa-spinner fa-spin': saving}"
               class="fa"></i>
            {{'save' | translate}}
        </span>
    </button>
    <button class="md-btn" ng-click="cancel()">
        <span>{{'cancel' | translate}}</span>
    </button>

    <button class="md-btn red" ng-click="deleteCredential()">
        <span>{{'delete' | translate}}</span>
    </button>
</script>
