<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="layout">

<head>
    <title th:text="#{screen.consent.title}"></title>
    
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css"/>
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/
        var data = {
            attributes: /*[[${attributes}]]*/
        };
        /*]]>*/
    </script>
    <script type="text/javascript" th:inline="javascript">

        function jqueryReady() {
            head.load(
                    /*[[@{/js/consent.js}]]*/
            );
        }
    </script>
</head>

<body id="cas">
<div layout:fragment="content">

    <div class="alert alert-info">
        <h1 th:text="#{screen.consent.title}"></h1>
        <p>The following attributes will be released to <strong>[<span th:text="${service.id}"/>]</strong>:</p>
        <table id="attributesTable" class="display table table-striped table-bordered">
            <thead>
            <tr>
                <th>Attribute</th>
                <th>Value(s)</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <br><br>
        <div class="panel panel-primary">
            <div class="panel-heading">Consent Options</div>
            <div class="panel-body">
                <div class="radio">
                    <label><input type="radio" name="optradio" value="always"><strong>Every Time</strong></label>
                    <span class="help-block">Show the consent screen every time I attempt to log into <span th:text="${service.id}"/></span>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="name" checked><strong>Attribute Name</strong></label>
                    <span class="help-block">
                        Show the consent screen, if an attribute is added or removed from the collection of attributes released
                        to <span th:text="${service.id}"/>.
                    </span>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="value"><strong>Attribute Value</strong></label>
                    <span class="help-block">
                         Show the consent screen, if:
                        <ul>
                            <li>A new attribute is authorized for release to <span th:text="${service.id}"/>.</li>
                            <li>An attribute is removed from the attribute bundle previously released to <span th:text="${service.id}"/>.</li>
                            <li>The value of an attribute authorized for release to <span th:text="${service.id}"/> has changed.</li>
                        </ul>
                    </span>
                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Reminder Options</div>
            <div class="panel-body">
                <span>
                    Show the consent screen, as a reminder, in that event that there is no change to the collection of attributes
                    released to <span th:text="${service.id}"/>  <p/>
                </span>
                <table>
                    <tr>
                        <td>
                            <input class="form-control" type="number">
                        </td>
                        <td>
                            <select class="selectpicker">
                                <option value="day">Days</option>
                                <option value="hour">Hours</option>
                                <option value="month">Months</option>
                            </select>
                        </td>
                    </tr>
                </table>

            </div>
        </div>

        <div align="center">
            <form method="post" id="fm1">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="confirm"/>
                <input class="btn btn-primary btn-lg"
                       name="confirm"
                       accesskey="l"
                       th:value="#{screen.consent.confirm}"
                       type="submit"/>
                &nbsp;
                <a class="btn btn-success btn-lg" id="cancel" name="cancel"
                   th:href="@{/login}" th:text="#{screen.consent.cancel}"/>
            </form>
        </div>

    </div>
</div>
</body>
</html>
