<div class="method-row">
    <?php
            $steps = trans('translations.steps');
    ?>
    <h3 id="method">@lang('translations.menu.method.name')</h3>

    <div class="steps" >
        <img src="/images/structure/steps.svg" alt="process Steps" class="steps-image">

        <div class="progress-slider">
            <div id="smileyNo" class="smiley">
                <span>?</span>
            </div>
            <div id="smileyYes" class="smiley"></div>
            <div class="text-holder">
                @foreach($steps as $names)
                    <p id="{{Str::slug($names['name'])}}">{{$names['name']}}</p>
                @endforeach
            </div>
            <div class="orange-steps">
            </div>
        </div>
    </div>

    <div class="steps-info">
        <div class="navigation">
            <span class="previous disabled"></span>

            <div class="show">
                <ul>
                    @foreach($steps as $key => $names)
                        <li id="nav-{{Str::slug($names['name'])}}"
                            @if($key == 'step1')class="active"@endif>{{$names['name']}}</li>
                    @endforeach
                </ul>
            </div>
            <span class="next"></span>
        </div>
        <div class="text-area">
            <div class="slider">
                @foreach($steps as $names)
                    <p id="text-{{Str::slug($names['name'])}}"
                       @if($key == 'step1')class="active"@endif>
                        <span class="small-screen">{{$names['name']}}</span>
                        {{$names['text']}}
                    </p>
                @endforeach
            </div>
        </div>

    </div>

</div>