@push('css')
    <style>
        #box-introduction input,  #box-introduction textarea{
            border: 1px solid #E0E0E0;
            font-size: 13px;
        }
        #box-introduction label{
            font-size: 14px;
        }
    </style>

@endpush
<template id="message-introduction"  >
    <div  id="box-introduction" class="row" style="margin: 0">
        <div class="col-xs-8" style="padding-left: 0; padding-right: 0">
            <label for="introduction_friend" style="margin-top: 10px; display: block;">紹介したいLINE公式アカウントのLINE ID</label>
            <input type="text" class="form-control" id="introduction_friend" style="width: 50%;margin-bottom: 5px; margin-top: 5px"
                   placeholder="@abc123"
                   name="introduction_friend"
                   v-validate="{required: true, max: 60}"
                   data-vv-as="紹介したいLINE公式アカウントのLINE ID"
                   data-vv-name="introduction_friend"
                   v-model="intro.friend_name"
            >

            <span class="tmp_err text-danger introduction_friend_error"  v-show="errors.has('introduction_friend')"> @{{ errors.first('text_content') }}</span>
{{--            <span class="tmp_err text-danger introduction_friend_error" id="introduction_friend_empty" style="display: none;">紹介するLINEアカウントIDは必ず指定してください。</span>--}}
{{--            <span class="tmp_err text-danger introduction_friend_error" id="introduction_friend_length" style="display: none;">紹介するLINEアカウントIDは60文字以下にしてください。</span>--}}

            <label for="introduction_name" style="margin-top: 10px;display: block;">紹介文</label>
            <textarea class="form-control" id="introduction_name"
                      v-validate="{required: true, max: 60}"
                      data-vv-as="紹介文"
                      data-vv-name="text_content"
                      cols="30" rows="2"
                      v-model="content"
                      style="margin-bottom: 5px; margin-top: 5px">
            </textarea>
            <p class="text-right" style="color: rgba(177,177,177,1)" >@{{ content.length }}/60文字</p>
            <span class="tmp_err text-danger "  v-show="errors.has('text_content')" >@{{ errors.first('text_content') }}</span>

            <label for="title" style="margin-top: 5px; display: block;">パソコン版LINEアプリ・通知欄の表示テキスト</label>
            <textarea class="form-control" name="display_pc"
                      v-validate="{ max: 400}"
                      data-vv-as="パソコン版LINEアプリ・通知欄の表示テキスト"
                      data-vv-name="display_pc"
                      cols="30" rows="4"
                      v-model="intro.display_pc"
                      id="display_pc"  style="margin-top: 5px" placeholder="">
{{--                @if(!empty($tmp_update->introduction)){!!substr($tmp_update->introduction->display_pc, 0,(strlen($tmp_update->introduction->display_pc)))!!}@endif--}}
            </textarea>
            <span class="tmp_err text-danger " v-show="errors.has('display_pc')" >@{{ errors.first('display_pc') }}</span>
            <p class="text-right" style="color: rgba(177,177,177,1)" >@{{ intro.display_pc ? intro.display_pc.length : 0}}/400文字</p>
            <p style="color: rgba(165,165,165,1);font-size: 12px">端末の環境によっては「スマートフォンでのみ確認可能なメッセージです。」などの文章が表示される場合があります。</p>

        </div>
    </div>
</template>