@extends(backpack_view('layouts.auth'))

@section('content')
<div class="page page-center transcript-page">
    <div class="container py-4">
        <div class="card">

            <div class="card-body text-left">

                <div class="mb-3">
                    <h2 class="h2 text-center my-4">Call Transcript</h2>
                </div>
                <div class="mb-1">
                    <div>
                    Call ID: <strong>{{ $call_id }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div>
                            Call Start: <strong>{{ $call_created_at }}</strong>
                        </div>
                        <div>
                            Call End: <strong>{{ $call_ended_at }}</strong>
                        </div>
                    </div>
                </div>

                <textarea id="transcript-textarea"  class="transcript-textarea" readonly>{{ $text }}</textarea>

                <div class="form-footer">
                    <a class="btn btn-primary" href="{{ $download_url }}" target="_blank">Download Transcript</a>
                    <button class="btn btn-secondary" onclick="window.close()">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection