@php
    $requestExampleLangs = [
        (object)[
            'label' => 'JavaScript',
            'lang' => 'JavaScript',
        ],
    ];
    $includeCurl = true; // COMENTAR ESTA LÍNEA EN PRODUCCIÓN!
    if(isset($includeCurl) && $includeCurl === true)
    {
        $unshift = (object)[
                'label' => 'Curl (verbose)',
                'lang' => 'Curl',
            ];
        array_unshift($requestExampleLangs, $unshift);
        $unshift = (object)[
                'label' => 'Curl (shorthand)',
                'lang' => 'Curl-Shorthand',
            ];
        array_unshift($requestExampleLangs, $unshift);
    }
    // if(!isset($requestJSONBody) || $requestJSONBody === '')
    //     array_unshift($requestExampleLangs, 'URL');

    $codeTabWidth = round(100 / (count($requestExampleLangs)), 8);

    $exampleCodeParams = array(
        'requestURL' => $requestURL,
    );

    if(isset($requestJSONBody) && !empty($requestJSONBody))
        $exampleCodeParams['requestJSONBody'] = $requestJSONBody;

    if(isset($userToken) && !empty($userToken))
        $exampleCodeParams['userToken'] = $userToken;

    if(isset($httpMethod) && !empty($httpMethod))
        $exampleCodeParams['httpMethod'] = $httpMethod;

    $issetExample = $example ?? true;

    $requestHtmlHeading = $issetExample ? 'Example request' : 'Request';
    $responseHtmlHeading = $issetExample ? 'Example response' : 'Response';

    // dd($codeTabWidth);
@endphp

<div class="d-flex flex-column w-100-percent my-5">
    <h4>{{ $requestHtmlHeading }}</h4>
    <div class="mfr-code-tabs w-100-percent">
        <div class="d-flex flex-row">
            @foreach($requestExampleLangs as $ind => $exampleLang)
                @if($ind === 0)
                <button class="w-custom-percent tab-button tab-btn-active" data-tab-number="{{ $ind+1 }}" style="--custom-percent: {{ $codeTabWidth }}%;">{{ $exampleLang->label }}</button>
                @else
                <button class="w-custom-percent tab-button" data-tab-number="{{ $ind+1 }}" style="--custom-percent: {{ $codeTabWidth }}%;">{{ $exampleLang->label }}</button>
                @endif
            @endforeach
        </div>
        @foreach($requestExampleLangs as $ind => $exampleLang)
        @if($ind !== 0)
        <div class="tab" data-tab-number="{{ $ind+1 }}" hidden {{-- style="height: 24em;" --}}>
        @else
        <div class="tab" data-tab-number="{{ $ind+1 }}" {{-- style="height: 24em;" --}}>
        @endif
            <pre class="pre-code-container-2 overflow-x-scroll w-100-percent limit-code-height">
                @include('components.functions.example-'.strtolower($exampleLang->lang), $exampleCodeParams)
            </pre>
        </div>
        @endforeach
    </div>
</div>
<div class="d-flex flex-column w-100-percent my-5">
    <h4>{{ $responseHtmlHeading }}</h4>
    <div class="d-flex flex-row w-100-percent code-stretch">
        <pre class="pre-code-container-2 overflow-x-hidden w-100-percent limit-code-height">
            <code class="lang-json w-100-percent">{{ json_decode(json_encode($functionExampleResponse)) ?? '(Empty response)' }}</code>
        </pre>
    </div>
</div>

<style>
    .code-stretch > div {
        width: 100% !important;
    }
    .limit-code-height {
        max-height: 30em;
    }
</style>