@if (session('error'))
        <div class="px-4 my-2">
            <div class="mr-4 alert alert-danger" role="alert">
                {!! session('error') !!}
            </div>
        </div>
    @endif 
<form id="formCustomMessages" name="formCustomMessages" class="mh-100 py-2">    
 <div class="mt-2 mx-2 px-2 pb-0 mb-auto mw-100 mh-100 d-flex align-items-start flex-column">


   
    <div class="form-row mh-20 d-flex w-100"> 
        <div class="form-group mt-0 container d-flex align-items-baseline">
            <span class="text-primary px-0 anchor-tooltip lead"><i class="fa-brands fa-{{ isset($socialmedia) ? strtolower($socialmedia) : 'creative-commons-zero' }}"></i></b> </span> 
            <span class="px-2"><h4>{{ $author }}</h4>  {{ $comment }} </span>
            <input type="hidden" name="id" class="form-control" id="id" value="{{ isset($commentId) ? $commentId : null }}" />
            <input type="hidden" name="socialmedia" class="form-control" id="socialmedia" value="{{ isset($socialmedia) ? $socialmedia : null }}" />
            
        </div>

        <div class="form-group pt-4 container d-flex align-items-baseline justify-content-end" id="channels">
            
                <div class="px-2 my-0">
                    <div id="alert" class="alert alert-success d-none" role="alert">{!! session('message') !!}</div>
                </div>
           @if (session('message')) @endif
            @foreach($replyChannels as $channel )
                <div class="form-check ps-0">
                    <input class="btn-check"  type="radio" name="channel" id="channel_{{ $channel->id }}" value="{{ $channel->id }}" 
                        {{ ($channel->id == $defaultChannelId) ? 'checked' : '' }}  
                        {{ (isset($live) & !($channel->id == $defaultChannelId)) ? 'disabled' : '' }} ">
                    <label class="btn ms-2 {{ ($channel->id == $defaultChannelId) ? 'btn-outline-success' : 'btn-secondary' }}" for="channel_{{ $channel->id }}">
                        {{ $channel->description }}
                    </label>
                </div>
            @endforeach                    
        </div>
    </div> 
    <div class="form-row h-0">
        
    </div>  	
    <div class="form-row mh-70 w-100">
        <div class="form-group pt-1 container h-100 w-100" id="tabs">
            <nav>
                <div class="nav nav-tabs border-bottom-0 h-10" id="nav-tab" role="tablist">
                    <button class="nav-link active fw-bold" id="nav-default-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">{{ __('applabels.DefaultMessages') }}</button>
                    <button class="nav-link fw-bold" id="nav-custom-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">{{ __('applabels.CustomMessage') }}</button>
                    
                </div>
            </nav>
            <div class="tab-content h-90" id="nav-tabContent">
                <div class="tab-pane fade show active border rounded-2 h-100" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="form-group p-4  scrollable overflow-auto" style="min-height: 280px;    height: calc(100vh - 100vh*0.6);">
                    @foreach($defaultMessages as $message )
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="message" id="message_{{ $message->id }}" value="{{ $message->id }}" {{ $message->default ? 'checked' : '' }} ">
                            <label class="form-check-label" for="message_{{ $message->id }}">
                                {{ $message->message }}
                            </label>
                        </div>
                    @endforeach                    
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="form-group pt-2 px-2 form-floating">
                    
                        <textarea height="180px" name="custom_text" class="form-control input-sm" id="custom_text" > </textarea>
                        <label for="custom_text">{{ __('applabels.WriteYourMessage') }}</label>
                    </div>
                </div> 
            </div>
        </div>
    </div>
    
    <div class="form-row d-flex flex-row-reverse pe-1 mh-10 w-100">     
        <input type="submit" class="m-2 btn btn-primary" id="customMessageSubmit"  value=" {{ __('applabels.Send') }} " />        
    </div>