<div class="inputbox">
    <div class="input-box-wrapper">
        <div class="box clearfix">
            <div class="box-content" ng-if="currenttype == ''">
                <div class="titlebar">ADD NEW</div>
                <div class="flex-container items {{list.length}}">
                    <div class="item" ng-repeat="item in list" sgl-click="select(item.type)" ng-dblclick="open(item.page)">
                        <div class="icon icon-fa-{{::item.icon}}" ng-if="item.src != ''">
                            <i class="fa fa-{{::item.icon}}" aria-hidden="true"></i>
                        </div>
                        <div class="title">
                            {{::item.name}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="forms">
                <div class="note-tmplt" ng-if="currenttype == 'NOTE'">
                    <div class="titlebar">NOTE</div>
                    <form>
                        <note-panel note="data.note"></note-panel>
                    </form>
                </div>
                <div class="list-tmplt" ng-if="currenttype == 'LIST'">
                    <div class="titlebar">LIST</div>
                    <form>
                        <list-panel list="data.list"></list-panel>
                    </form>
                </div>
                <div class="activity-tmplt" ng-if="currenttype == 'ACTY'">
                    <div class="titlebar">ACTIVITY</div>
                    <form>
                        <activity-panel activity="data.activity"></activity-panel>
                    </form>
                </div>
                <div class="mood-tmplt" ng-if="currenttype == 'MOOD'">
                    <div class="titlebar">MOOD</div>
                    <form>
                        <div class="inputfield">
                            <label class="input-title">Mark your mood level</label>
                            <mood-panel mood="data.mood"></mood-panel>
                        </div>
                    </form>
                </div>
                <div class="habit-tmplt" ng-if="currenttype == 'HABT'">
                    <div class="titlebar">HABIT</div>
                    <form>
                        <habit-panel habit="data.habit"></habit-panel>
                    </form>
                </div>
                <div class="fitness-tmplt" ng-if="currenttype == 'HLTH'">
                    <div class="titlebar">FITNESS</div>
                    <form class="fitness-panel">
                        <fitness-panel fitness="data.fitness"></fitness-panel>
                        <!-- <div class="add-new">
                            ADD ANOTHER WORKOUT
                        </div> -->
                    </form>
                </div>
                <div class="food-tmplt" ng-if="currenttype == 'FOOD'">
                    <div class="titlebar">FOOD</div>
                    <form class="food-panel">
                        <food-panel food="data.food"></food-panel>
                        <!-- <div class="add-new">
                            ADD ANOTHER ITEM
                        </div> -->
                    </form>
                </div>
                <div class="money-tmplt" ng-if="currenttype == 'MNEY'">
                    <div class="titlebar">MONEY</div>
                    <form>
                        <finance-panel finance="data.finance"></finance-panel>
                        <!-- <div class="add-new">
                            ADD ANOTHER EXPENSE
                        </div> -->
                    </form>
                </div>
                <div class="places-tmplt" ng-if="currenttype == 'PLCS'">
                    <div class="titlebar">PLACE</div>
                    <form>
                        <place-panel place="data.place"></place-panel>
                    </form>
                </div>
                <div class="media-tmplt" ng-if="currenttype == 'MDIA'">
                    <div class="titlebar">MEDIA</div>
                    <form>
                        <media-panel media="data.media"></media-panel>
                    </form>
                </div>
                <div class="people-tmplt" ng-if="currenttype == 'PEPL'">
                    <div class="titlebar">PEOPLE</div>
                    <form>
                        <people-panel people="data.people"></people-panel>
                    </form>
                </div>
                <div class="calendar-tmplt" ng-if="currenttype == 'CLDR'">
                    <div class="titlebar">CALENDAR</div>
                    <form>
                        <calendar-panel calendar="data.calendar"></calendar-panel>
                    </form>
                </div>
            </div>
        </div>
        <div class="snippet-options clearfix">
            <div class="options calendar" ng-if="currenttype != '' && currenttype != 'HABT' && currenttype != 'CLDR'">
                <calendar date="selected" options="{isShowDate: true, isShowBefore: false}"></calendar>
                <span>-</span>
                <timepicker time="selected"></timepicker>
            </div>
            <div class="options buttons" ng-show="currenttype != ''">
                <button type="submit" class="btn btn-default" id="reset" ng-click="reset()">Reset</button>
                <button type="submit" class="btn button-submit" id="submit" ng-click="submit()">Submit</button>
            </div>
        </div>
    </div>
</div>