@extends('layout')
@section('content')
    <div class="sound-detail">
        <h1>{{ $sound['name'] }}</h1>
        <div class="sound" data-sound="{{ $sound['sound'] }}">
            <img src="{{ $sound['image'] }}" alt="{{ $sound['name'] }}">
            <audio id="{{ $sound['id'] }}" src="{{ $sound['sound'] }}"></audio>
        </div>
        <a href="">
            <svg class="link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" transform="translate(0,0)" style=""><path d="M19.023 19.676v27.2L75.48 104.32l24.842-24.843-58.804-59.8H19.023zm65.41 3.498c-4.468.09-8.392.9-11.83 2.244L189.15 141.963c2.893-7.395 3.085-17.245-.146-29.094-4.61-16.908-16.108-36.597-33.408-53.895-17.3-17.3-36.99-28.8-53.897-33.41-6.34-1.73-12.125-2.495-17.265-2.39zm-63.09 53.51c-2.894 7.394-3.088 17.243.143 29.09 4.61 16.908 16.11 36.598 33.41 53.898 17.3 17.3 36.988 28.797 53.895 33.408 11.85 3.232 21.7 3.04 29.095.147L21.342 76.684zm107.07 30.96l-24.716 24.717 119.545 119.546 24.717-24.717-119.546-119.545zm366 56.57c-7.766 2.724-15.67 6.186-23.36 10.626-20.332 11.738-35.756 27.138-44.106 41.637-5.734 9.956-7.942 18.928-7.213 26.365l74.68-42.953v-35.675zm-257.07 11.87c-4.466.09-8.39.9-11.827 2.246l73.62 73.62c10.648-5.168 21.366-8.972 31.78-11.358-5.744-9.727-13.255-19.55-22.41-28.705-17.3-17.3-36.99-28.8-53.897-33.41-6.34-1.73-12.126-2.497-17.266-2.393zm-62.677 53.096c-2.894 7.394-3.085 17.244.147 29.093 4.61 16.907 16.11 36.597 33.41 53.897 6.408 6.408 13.144 12.014 19.945 16.775 1.55-7.685 4.687-15.44 9.016-22.86 1.705-2.925 3.62-5.822 5.7-8.69l-68.218-68.215zm304.063.668L338.36 311.03l16.425 28.75 137.88-79.628v-6.12l-13.936-24.184zm-122.783 26.406c-16.79.075-37.91 5.84-58.258 17.588-20.348 11.747-35.902 27.155-44.362 41.658-5.79 9.93-8.063 18.86-7.39 26.26l136.445-78.776c-6.074-4.282-14.942-6.78-26.436-6.73zm138.467 23.637l-39.684 22.936c3.228 2.31 7.23 4.13 12.22 5.32 7.53 1.793 17.022 1.925 27.464.307V279.89zm-75.32 43.643l-136.448 78.78c6.073 4.283 14.943 6.78 26.438 6.728 16.79-.074 37.912-5.84 58.26-17.587 20.347-11.747 35.9-27.154 44.36-41.658 5.793-9.93 8.063-18.86 7.39-26.262zM296.53 334.19l-10.686 6.167-.037-.037-12.73 7.35.09.008-116.956 67.525 16.472 28.53 140.32-81.012-16.473-28.53zm138.993 7.558c-1.74 5.896-4.36 11.778-7.675 17.463-2.508 4.3-5.44 8.55-8.743 12.71l68.754 68.754c2.892-7.394 3.084-17.244-.147-29.092-4.61-16.906-16.108-36.595-33.408-53.894-6.042-6.042-12.377-11.36-18.782-15.94zM177.44 360.326c-16.79.075-37.91 5.84-58.258 17.588C98.834 389.66 83.28 405.07 74.82 419.572c-5.79 9.928-8.062 18.86-7.39 26.26l136.445-78.775c-6.073-4.283-14.942-6.782-26.436-6.73zM427.2 406.61l-24.67 24.29 62.49 62.996h27.644V472.07L427.2 406.61zm-66.124 8.982c-10.614 4.73-21.244 8.11-31.514 10.076 5.956 10.888 14.173 22.015 24.458 32.3 17.298 17.3 36.987 28.8 53.894 33.41 11.85 3.233 21.7 3.04 29.096.147l-75.934-75.933zM239.09 427.674l-114.528 66.123h65.815c18.962-11.586 33.505-26.31 41.502-40.193 5.648-9.81 7.863-18.622 7.21-25.93zm-114.854 7.144L21.73 493.896h65.452l53.392-30.86-16.338-28.218z" fill="#fff" fill-opacity="1"></path></g></svg>
            <span>{{ __('base.link') }}</span>
        </a>
        @if(auth()->check())
            <a href="{{ route('upload.edit', $sound['id']) }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" transform="translate(0,0)" style=""><path d="M331.188 16.72c-40.712-.002-81.41 15.408-112.438 46.436-43.866 43.864-56.798 107-38.813 162.25L17.03 388.312v25.75l170.22-170.218c2.75 5.84 5.847 11.555 9.344 17.094L17.03 440.5v51.78H64l181.875-181.874c5.516 3.515 11.212 6.668 17.03 9.438L90.44 492.28h27.03l164.75-164.75c55.182 17.85 118.21 4.884 162-38.905 41.415-41.414 54.998-99.91 41.282-152.813L380.22 241.125l-90.033-23.938-23.968-90.03L371.53 21.843c-13.213-3.41-26.772-5.125-40.342-5.125z" fill="#fff" fill-opacity="1"></path></g></svg>
                <span>{{ __('base.edit') }}</span>
            </a>
            <a href="{{ route('upload.delete', $sound['id']) }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" transform="translate(0,0)" style=""><path d="M199 103v50h-78v30h270v-30h-78v-50H199zm18 18h78v32h-78v-32zm-79.002 80l30.106 286h175.794l30.104-286H137.998zm62.338 13.38l.64 8.98 16 224 .643 8.976-17.956 1.283-.64-8.98-16-224-.643-8.976 17.956-1.283zm111.328 0l17.955 1.284-.643 8.977-16 224-.64 8.98-17.956-1.284.643-8.977 16-224 .64-8.98zM247 215h18v242h-18V215z" fill="#fff" fill-opacity="1"></path></g></svg>
                <span>{{ __('base.delete') }}</span>
            </a>
        @endif
        <a href="{{ $sound['sound'] }}" download>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" transform="translate(0,0)" style=""><path d="M130.81 21.785v245.95H43.84L256 489.382l212.158-221.644H381.19V21.786h-39.118v301.028c.263 2.756.403 5.547.403 8.37 0 48.275-39.334 87.61-87.61 87.61-46.467 0-84.644-36.446-87.44-82.228h-.288V21.786zm127.018 8.485L230.33 261.984 212.82 133.98c-3.592 63.362-25.266 134.536-25.365 196.592 0 37.12 30.29 67.408 67.408 67.408 37.117 0 67.408-30.288 67.408-67.408 0-1.938-.1-3.854-.262-5.752-6.334-49.764-13.546-100.753-20.408-150.924l-13.422 98.135c-.587-.335-1.176-.667-1.774-.985zm-2.965 251.572c27.027 0 48.73 21.703 48.73 48.73 0 27.026-21.707 48.733-48.73 48.733-27.027 0-48.73-21.706-48.73-48.733 0-27.026 21.708-48.73 48.73-48.73z" fill="#fff" fill-opacity="1"></path></g></svg>
            <span>{{ __('base.download') }}</span>
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" transform="translate(0,0)" style=""><path d="M331.188 16.72c-40.712-.002-81.41 15.408-112.438 46.436-43.866 43.864-56.798 107-38.813 162.25L17.03 388.312v25.75l170.22-170.218c2.75 5.84 5.847 11.555 9.344 17.094L17.03 440.5v51.78H64l181.875-181.874c5.516 3.515 11.212 6.668 17.03 9.438L90.44 492.28h27.03l164.75-164.75c55.182 17.85 118.21 4.884 162-38.905 41.415-41.414 54.998-99.91 41.282-152.813L380.22 241.125l-90.033-23.938-23.968-90.03L371.53 21.843c-13.213-3.41-26.772-5.125-40.342-5.125z" fill="#fff" fill-opacity="1"></path></g></svg>
            <span>{{ __('base.voiceMod') }}</span>
        </a>
    </div>
@endsection