@extends('layouts.app')

@section('title', 'Workshop')

@section('content')

    <div class="row">
        <h2>Take a Screenshot of you Website... <small>you can also create a showcase to see how it looks on multiple devices</small></h2>

        <form>
            <div class="form-group col-md-6">
                <label for="url">URL</label>
                <input type="url" class="form-control" name="url" placeholder="URL to screenshot">
            </div>
            <div class="form-group col-md-3">
                <label for="w">Width</label>
                <input type="number" class="form-control" name="w" placeholder="1024">
            </div>
            <div class="form-group col-md-3">
                <label for="h">Height</label>
                <input type="number" class="form-control" name="h" placeholder="768">
            </div>


            <div class="form-group col-md-6">
                <label for="user-agent">User Agent String</label>
                <input type="text" class="form-control" name="user-agent"
                       placeholder="e.g.: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36">
            </div>
            <div class="form-group col-md-3">
                <label for="clipw">Clip Width</label>
                <input type="number" class="form-control" name="clipw" placeholder="0">
            </div>
            <div class="form-group col-md-3">
                <label for="cliph">Clip Height</label>
                <input type="number" class="form-control" name="cliph" placeholder="0">
            </div>

            <div class="col-md-6"></div>
            <div class="form-group col-md-3">
                <label for="bg-color">Clip Width</label>
                <input type="text" name="bg-color" value="#ffffff" class="form-control color-picker" data-format="hex"/>
            </div>

            <div class="col-md-12">
                <button class="btn btn-default pull-right">Submit</button>
                <p class="lead pull-right">You may have to wait a little bit... &nbsp;</p>
            </div>
        </form>
    </div>

@endsection