{{-- slice 11, flow ج۷ «نصب روی گوشی» (demo #34): Android ⇒ the browser's own install window; iPhone ⇒ the steps of
     «Share ⇐ Add to Home Screen»; already installed ⇒ «اپ روی این گوشی نصب است». WITHOUT a script every guide is shown
     and nothing pretends to be a button. the script (mzInstall) only chooses which guide leads and offers the browser's
     window when the browser offered one. never a floating bar over the prices (پ۱۱-۱). --}}
@extends('layouts.mz')

@section('title', 'نصب روی گوشی')

@section('content')
    <h1 class="mz-title">نصب مظنه روی گوشی</h1>
    <p class="mz-lead">با نصب، مظنه با نماد خودش روی صفحهٔ گوشی می‌نشیند و مثل یک اپ، بی نوار نشانی، باز می‌شود. قیمت‌ها همچنان فقط با اتصال اینترنت دیده می‌شوند.</p>

    <div class="mz-install-list" x-data="mzInstall">
        <section class="mz-card mz-notice--ok" x-show="installed" x-cloak aria-live="polite">
            <h2 class="mz-card__title">اپ روی این گوشی نصب است</h2>
            <p>مظنه را از نماد «م» روی صفحهٔ گوشی باز کنید.</p>
        </section>

        <section class="mz-card" x-show="!installed && canPrompt" x-cloak>
            <h2 class="mz-card__title">نصب با یک دکمه</h2>
            <p>مرورگر شما نصب را پیشنهاد می‌دهد. دکمه را بزنید و در پنجرهٔ مرورگر «نصب» را بپذیرید.</p>
            <div class="mz-actions">
                <button class="mz-btn" type="button" x-on:click="install()">نصب مظنه</button>
            </div>
        </section>
        <p class="mz-notice" role="status" x-show="said" x-text="said" x-cloak></p>

        <section class="mz-card mz-install" id="mz-install-android" x-show="!installed">
            <h2 class="mz-card__title">اندروید (Chrome)</h2>
            <ol class="mz-install__steps">
                <li>همین صفحه را در Chrome باز کنید.</li>
                <li>منوی سه‌نقطهٔ بالای مرورگر (<span aria-hidden="true">⋮</span>) را بزنید.</li>
                <li>«نصب اپ» یا «افزودن به صفحهٔ اصلی» را بزنید و «نصب» را بپذیرید.</li>
            </ol>
        </section>

        <section class="mz-card mz-install" id="mz-install-iphone" x-show="!installed" x-bind:class="ios ? 'mz-install--first' : ''">
            <h2 class="mz-card__title">آیفون (Safari)</h2>
            <ol class="mz-install__steps">
                <li>همین صفحه را در Safari باز کنید.</li>
                <li>
                    دکمهٔ «اشتراک‌گذاری» پایین صفحه را بزنید
                    <svg class="mz-install__icon" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false"><path d="M12 3v12M7.5 7.5 12 3l4.5 4.5M6 11H4.5v10h15V11H18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    (مربعی با پیکان رو به بالا).
                </li>
                <li>در فهرست پایین بروید و <bdi>Add to Home Screen</bdi> («افزودن به صفحهٔ اصلی») را بزنید، سپس <bdi>Add</bdi>.</li>
            </ol>
            <p class="mz-hint">اپ نصب‌شده در آیفون ورود جدای خودش را دارد: پس از نصب، یک بار با شمارهٔ موبایل و کد پیامکی در خود اپ وارد شوید.</p>
        </section>
    </div>

    <div class="mz-actions">
        @if ($signedIn)
            <a class="mz-btn mz-btn--quiet" href="{{ route('mz.colleague.home') }}">بازگشت به قیمت‌ها</a>
        @else
            <a class="mz-btn mz-btn--quiet" href="{{ route('mz.colleague.login') }}">ورود همکار</a>
        @endif
    </div>
@endsection