<div class="cover">
    <h1 class="zone xl margin-bottom-large margin-top">
        Settings
    </h1>
</div>

<div class="zone xl"
    data-service="projects.getProject"
    data-scope="console"
    data-name="console-project"
    data-event="load"
    data-param-project-id="{{router.params.project}}"
    data-success="trigger"
    data-success-param-trigger-events="project-load">

    <div class="zone xl">
        <ul class="phases clear" data-ui-phases data-selected="{{router.params.tab}}">
            <li data-state="/console/settings?project={{router.params.project}}">
                <h2>Overview</h2>

                <form
                    data-service="projects.updateProject"
                    data-scope="console"
                    data-event="submit"
                    data-param-project-id="{{router.params.project}}"
                    data-success="alert,trigger"
                    data-success-param-alert-text="Saved project successfully"
                    data-success-param-trigger-events="project-update"
                    data-failure="alert"
                    data-failure-param-alert-text="Failed to update project"
                    data-failure-param-alert-classname="error">

                    <input name="$uid" type="hidden" data-ls-bind="{{console-project.$uid}}" />

                    <div class="row">
                        <div class="col span-9">
                            <div class="box">
                                <label for="name">Name</label>
                                <input name="name" id="name" type="text" autocomplete="off" data-ls-bind="{{console-project.name}}" data-forms-text-direction required>

                                <label for="name">Project UID</label>
                                <div class="input-copy">
                                    <input data-forms-copy type="text" disabled data-ls-bind="{{console-project.$uid}}" />
                                </div>

                                <label for="name">API Endpoint</label>
                                <div class="input-copy">
                                    <input data-forms-copy type="text" disabled data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/v1" />
                                </div>

                                <label for="description">Description &nbsp;<small>(optional)</small></label>
                                <textarea name="description" id="description" autocomplete="off" placeholder="Help us make the world a better place" data-ls-bind="{{console-project.description}}" data-forms-text-direction data-forms-text-count></textarea>

                                <label for="url">Website &nbsp;<small>(optional)</small></label>
                                <input name="url" id="url" type="url" class="full-width" autocomplete="off" placeholder="https://acme-corp.com" data-ls-bind="{{console-project.url}}">

                                <hr />

                                <button class="" type="submit">Save</button>
                            </div>
                        </div>

                        <div class="col span-3 box-aside">
                            <label for="name">Logo</label>
                            <div class="text-align-center clear">
                                <input type="hidden" name="logo" data-ls-bind="{{console-project.logo}}" data-read="<?php echo $this->escape(json_encode(['*'])); ?>" data-write="<?php echo $this->escape(json_encode(['team:{{console-project.teamId}}'])); ?>" data-accept="image/*" data-forms-upload="" data-scope="console" data-default="">
                            </div>
                        </div>
                    </div>
                </form>
            </li>
            <li data-state="/console/settings/privacy?project={{router.params.project}}">

                <form
                    data-service="projects.updateProject"
                    data-scope="console"
                    data-event="submit"
                    data-param-project-id="{{router.params.project}}"
                    data-success="alert,trigger"
                    data-success-param-alert-text="Saved project successfully"
                    data-success-param-trigger-events="project-update"
                    data-failure="alert"
                    data-failure-param-alert-text="Failed to update project"
                    data-failure-param-alert-classname="error">

                    <h2>Privacy & Legal</h2>

                    <div class="box margin-bottom">
                        <input name="$uid" type="hidden" data-ls-bind="{{console-project.$uid}}" />

                        <div class="row thin">
                            <div class="col span-6">
                                <label for="legalName">Legal Name</label>
                                <input name="legalName" id="legalName" type="text" autocomplete="off" data-ls-bind="{{console-project.legalName}}" data-forms-text-direction>

                                <label for="legalCountry">Country</label>
                                <select id="legalCountry" name="legalCountry" data-ls-bind="{{console-project.legalCountry}}" data-ls-loop="locale-countries" data-ls-as="option">
                                    <option data-ls-attrs="value={{$index}}" data-ls-bind="{{option}}"></option>
                                </select>

                                <label for="legalCity">City</label>
                                <input name="legalCity" id="legalCity" type="text" autocomplete="off" data-ls-bind="{{console-project.legalCity}}" data-forms-text-direction>
                            </div>

                            <div class="col span-6">
                                <label for="legalTaxId">Tax ID</label>
                                <input name="legalTaxId" id="legalTaxId" type="text" autocomplete="off" data-ls-bind="{{console-project.legalTaxId}}" data-forms-text-direction>

                                <label for="legalState">State</label>
                                <input name="legalState" id="legalState" type="text" autocomplete="off" data-ls-bind="{{console-project.legalState}}" data-forms-text-direction>

                                <label for="legalAddress">Address</label>
                                <input name="legalAddress" id="legalAddress" type="text" autocomplete="off" data-ls-bind="{{console-project.legalAddress}}" data-forms-text-direction>
                            </div>
                        </div>

                        <hr />

                        <button class="" type="submit">Save</button>
                    </div>
                </form>
            </li>
            <li data-state="/console/settings/members?project={{router.params.project}}">
                <h2>Members</h2>

                <div class="zone xl"
                    data-service="teams.getTeamMembers"
                    data-scope="console"
                    data-event="load,membership-create,membership-update,membership-delete"
                    data-name="members"
                    data-param-team-id="{{console-project.teamId}}"
                    data-success="trigger"
                    data-success-param-trigger-events="members-load">

                    <div class="box margin-bottom">
                        <ul data-ls-loop="members" data-ls-as="member" class="list">
                            <li class="clear">
                                <form class="pull-end"
                                    data-service="teams.deleteTeamMembership"
                                    data-scope="console"
                                    data-event="submit"
                                    data-success="alert,trigger"
                                    data-success-param-alert-text="Member Removed Successfully"
                                    data-success-param-trigger-events="membership-delete"
                                    data-failure="alert"
                                    data-failure-param-alert-text="Failed to Remove Member"
                                    data-failure-param-alert-classname="error">

                                    <input name="teamId" id="teamId" type="hidden" data-ls-bind="{{console-project.teamId}}">
                                    <input name="inviteId" id="inviteId" type="hidden" data-ls-bind="{{member.inviteId}}">

                                    <button class="danger">Leave</button>
                                </form>

                                <div data-ls-if="false === {{member.confirm}}" class="pull-end margin-end" style="display: none;">
                                    <form
                                        data-service="teams.createTeamMembershipResend"
                                        data-scope="console"
                                        data-event="submit"
                                        data-loading="Resending invitation, please wait..."
                                        data-success="alert,trigger"
                                        data-success-param-alert-text="Invitation Sent Successfully"
                                        data-success-param-trigger-events="membership-resend"
                                        data-failure="alert"
                                        data-failure-param-alert-text="Failed to Send Invite"
                                        data-failure-param-alert-classname="error">
                                        
                                        <input name="teamId" id="teamId" type="hidden" data-ls-bind="{{console-project.teamId}}">
                                        <input name="inviteId" id="inviteId" type="hidden" data-ls-bind="{{member.inviteId}}">
                                        <input name="redirect" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />

                                        <button class="reverse">Resend</button>
                                    </form>
                                </div>

                                <img src="" data-ls-attrs="src={{member|gravatar}}" data-size="200" alt="User Avatar" class="avatar pull-start margin-end" loading="lazy" width="60" height="60" />

                                <div class="margin-bottom-small">
                                    <span data-ls-bind="{{member.name}}"></span> &nbsp;&nbsp;<span class="tag" data-ls-bind="{{member.roles.0}}"></span> &nbsp;&nbsp;<span data-ls-if="false === {{member.confirm}}" class="tag red" style="display: none;">Pending Approval</span>
                                </div>
                                <small data-ls-bind="{{member.email}}"></small>
                            </li>
                        </ul>
                    </div>

                    <div data-ui-modal class="modal close width-small" data-button-text="Invite Member" data-button-class="">
                        <button type="button" class="close pull-end" data-ui-modal-close><i class="icon-cancel"></i></button>

                        <h1>Invite Member</h1>

                        <form name="teams.createTeamMembership"
                            data-service="teams.createTeamMembership"
                            data-scope="console"
                            data-event="submit"
                            data-loading="Sending invitation, please wait..."
                            data-success="alert,trigger,reset"
                            data-success-param-alert-text="Invitation Sent Successfully"
                            data-success-param-trigger-events="membership-create,modal-close"
                            data-failure="alert"
                            data-failure-param-alert-text="Failed to Send Invite"
                            data-failure-param-alert-classname="error">

                            <input name="teamId" id="teamId" type="hidden" data-ls-bind="{{console-project.teamId}}">
                            <input name="redirect" type="hidden" data-ls-bind="{{env.PROTOCOL}}://{{env.DOMAIN}}/auth/join?project={{router.params.project}}" />

                            <label for="name">Name <small>(optional)</small></label>
                            <input name="name" id="name" type="text" autocomplete="name">

                            <label for="email">Email</label>
                            <input name="email" id="email" type="email" autocomplete="email" required>

                            <label for="roles">Role</label>
                            <select id="roles" name="roles" required data-ls-loop="env.ROLES" data-ls-as="role" data-cast-to="array">
                                <option data-ls-attrs="value={{role.type}}" data-ls-bind="{{role.label}}"></option>
                            </select>

                            <div class="clear">
                                <button>Send Invite</button>
                                &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>