<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Moustache-swap</title>
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon">
    <link rel="icon" href="static/favicon.ico" type="image/x-icon">

    <meta name="description" content="Moustache-swap, Echange d'annexe avec original"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <style type="text/css">
    .main{
    	margin-top: 20px;
    }

    </style>
</head>

<body style="padding-top: 50px ">
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <img src="/static/moustache-swap.png" height="36" width="36" style="display:inline"> Moustache-swap
            </a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container main">

    <div class="row fluid">
        <div class="col-md-6">
            <form action="{{url_for('api_v1_pdf_swap')}}" method="post" enctype="multipart/form-data">

                <div class="panel panel-danger">

                    <div class="panel-heading">Formulaire d'interrogation de Moustache-swap</div>
                    <div class="panel-body">

                        <div class="form-group">
                            <label for="{{API.PDF.SWAP.FILE}}" class="control-label col-sm-4">Main PDF document</label>
                            <div class="col-sm-8">
                                <input type="file" name="{{API.PDF.SWAP.FILE}}"
                                       id="{{API.PDF.SWAP.FILE}}" aria-describedby="{{API.PDF.SWAP.FILE}}-help"
                                       class="col-sm-8 form-control"/>
                                <small class="help-block" id="{{API.PDF.SWAP.FILE}}-help">Main PDF file with empty
                                    pages</small>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{API.PDF.SWAP.JSON}}" class="control-label col-sm-4">Data (JSON)</label>
                            <div class="col-sm-8">
                                <input type="file" name="{{API.PDF.SWAP.JSON}}"
                                       id="{{API.PDF.SWAP.JSON}}" aria-describedby="{{API.PDF.SWAP.JSON}}-help"
                                       class="col-sm-8 form-control"/>
                                <small class="help-block" id="{{API.PDF.SWAP.JSON}}-help">JSON file containing the data
                                    used for replacements</small>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{API.PDF.SWAP.ANNEXES}}"
                                   class="control-label col-sm-4">Documents to insert</label>
                            <div class="col-sm-8">
                                <input type="file" name="{{API.PDF.SWAP.ANNEXES}}" multiple
                                       id="{{API.PDF.SWAP.ANNEXES}}" aria-describedby="{{API.PDF.SWAP.ANNEXES}}-help"
                                       class="col-sm-8 form-control"/>
                                <small class="help-block" id="{{API.PDF.SWAP.ANNEXES}}-help">PDF files to be inserted in
                                    the main document</small>
                            </div>
                        </div>

                    </div>
                    <div class="panel-footer text-right">
                        <button type="submit" class="btn btn-danger "><span class="fa fa-cog"></span> Générer</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="col-md-6">
            <div class="panel panel-danger">
                <div class="panel-heading">Sample CURL call</div>
                <div class="panel-body">
                      <pre><code>curl -i -X POST {{url_for('api_v1_pdf_swap', _external=True)}} \
-F "{{API.PDF.SWAP.JSON}}=@ressources/test-ok/skittles.json" \
-F "{{API.PDF.SWAP.FILE}}=@ressources/test-ok/principal.pdf" \
-F "{{API.PDF.SWAP.ANNEXES}}=@ressources/test-ok/annexe1.pdf" \
-F "{{API.PDF.SWAP.ANNEXES}}=@ressources/test-ok/annexe2.pdf" > result.pdf</code></pre>
                </div>
            </div>
        </div>


    </div>

    <hr/>
    <footer>
        <p class="pull-right">&copy; <a href='http://www.libriciel.fr'>Libriciel SCOP</a>, 2018 - 2020</p>
    </footer>
</div>


</body>
</html>

